Da ich ein neues Projekt durchführen möchte, habe ich vor, einen einfachen Bildüberprüfungscode durchzuführen.
Lassen Sie uns zuerst über die Idee sprechen: Finden Sie auf der Serverseite 8 Bilder aus einem Ordner, fusionieren Sie die 8 Bilder in ein großes Bild und generieren zufällig eine Bildklassifizierung, damit die Benutzer in den 8 kleinen Bildern wie Welpen, Bier usw. am vorderen Ende auf diese Seite zugreifen können, laden Sie das Bild und der Benutzer wählt das Bild aus, das auf dem Bild erforderlich ist. Wenn sich der Benutzer anmeldet, bestimmen Sie, ob das ausgewählte Bild tatsächlich ein Überprüfungsbild ist, das auf allen vom Benutzer ausgewählten Koordinaten basiert.
Lassen Sie uns zuerst zwei Renderings setzen:
Um die Dateisuche zu vereinfachen, kann die Bilddateistruktur wie folgt sein:
Dies erleichtert die Erzeugung der Schlüsselbilder, die der Benutzer auswählen möchte, und kombinieren sie zu einem großen Bild mit 8 kleinen Bildern.
CODE OBE CODE: In diesem Fall werden 8 Bilder ausgewählt und rekursiv sichergestellt, dass die ausgewählten Bilder bei der Auswahl jedes Bildes nicht wiederholt werden.
// Wählen Sie 8 Bilder öffentliche statische Liste <Object> getEchimages () {// Speichern Sie den Pfad jedes Bildes, um sicherzustellen, dass das Bild nicht wiederholt wird. Datei [] Finalimages = neue Datei [8]; Liste <Object> Object = New ArrayList <Object> (); // Tipps speichern String [] tips = new String [8]; für (int i = 0; i <8; i ++) {// REAME Secondary Directory int dirindex = getRandom (secondaryDirnumbers); Datei SecondaryDir = getFiles () [Dirindex]; // Speichern Sie den Namen zufälliger Ordner in Tipps zu Tipps [i] = secondaryDir.getName (); // Die Datei in der Secondary Image -Verzeichnisdatei [] images = secondaryDir.Listfiles () abrufen; int imageIndex = getRandom (Imagerandomindex); Datei image = Bilder [ImageIndex]; // Bilddeduplizierung image = DropSameImage (Bild, Pfade, Tipps, i); paths.add (image.getPath ()); Finalimages [i] = Bild; } Object.Add (Finalimages); Object.Add (Tipps); Objekt zurückgeben;}Speichern Sie bei der Generierung dieser 8 Bilder alle Dateikategorien in einem Array. In dieser Kategorie können Sie zufällige Nummern verwenden, um eine Kategorie als Schlüsselkategorie auszuwählen. Alle Bilder, die der Benutzer auswählen möchte. Da das Array bestellt wird, können Sie die Elemente im Array durchqueren, um den Standort jedes Schlüsselklassifizierungsbildes zu erhalten, was für die Übereinstimmung während der Benutzerüberprüfung geeignet ist.
// Holen Sie sich den Ort, welches Bild zurückgegeben wird, nicht im Index. Ab 1 ist das erste Element der Sammlung das Tipp der öffentlichen statischen Liste <Object> getLocation (string [] tips) {list <Object> positions = new ArrayList <Object> (); // Schlüsselklassifizierungsstring TIP = Gettip (Tipps) erhalten; Standorte.Add (Tipp); int länge = tipps.length; für (int i = 0; i <länge; i ++) {if (tip.equals (tipps [i])) {popals.add (i+1); }} Rückgabepositionen; }Nach der Auswahl von 8 Bildern besteht der nächste Schritt darin, die Bilder zusammenzuführen. Um Bilder zusammenzuführen, können Sie die BufferedImage -Methode verwenden: setRGB () -Methode. Wenn Sie es nicht verstehen, können Sie die API -Dokumentation lesen, die detaillierte Anweisungen enthält.
public static void mergeImage (Datei [] Finalimages, httpServletResponse -Antwort) löst ioException {// das Bild BufferedImage Mergeage = new bufferedImage (800, 400, bufferedimage.type_int_bgr) aus. für (int i = 0; i <8; i ++) {Datei image = finalimages [i]; Bufferedimage bufferedimage = imageio.read (Bild); int width = bufferedImage.getWidth (); int Höhe = bufferedImage.getheight (); // RGB aus dem Bild int [] imageBytes = new int [width*Höhe] lesen; ImageBytes = bufferedImage.getRGB (0, 0, Breite, Höhe, ImageBytes, 0, Breite); if (i <4) {mergeImage.setRGB (i*200, 0, width, Höhe, ImageBytes, 0, Breite); } else {mergeImage.setrgb ((i -4)*200, 200, width, Höhe, ImageBytes, 0, Breite); }} Imageio.write (MergeImage, "jpg", response.getOutputStream ()); //Imageo.write(MergeImage, "JPG", Destimage); }Speichern Sie in der Controller -Ebene zunächst die Schlüsselklassifizierung in die Sitzung und führen Sie die Eingabeaufforderungen und die Bildüberprüfung vor, damit Benutzer die Bildklassifizierung auswählen können. Dann geben Sie den Bildstrom zur Antwort aus, um das Überprüfungsbild zu erzeugen.
Antwort.SetContentType ("Image/JPEG"); response.setheader ("pragma", "no-cache"); response.setheader ("cache-control", "no-cache"); response.setDateHeader ("läuft", 0); LIST <Object> Object = ImagesSelectedHelper.GetEightImages (); Datei [] Finalimages = (Datei []) Objekt.get (0); String [] tips = (string []) Objekt.get (1); // Die Bildpositionen aller Tasten, dh das Bild, das der Benutzer liste <elements> poportations = mictageSelectedHelper.getLocation (Tipps) auswählen muss; String tip = popals.get (0) .ToString (); System.out.println (Tipp); Session.SetAttribute ("Tipp", Tipp); Standorte.Remove (0); int länge = sospositionen.size (); für (int i = 0; i <length; i ++) {System.out.println ("Tatsächliche Schlüsselbildsposition:"+Standorte.get (i)); } Session.setAttribute ("Standorte", Standorte); Imagemerge.MergeImage (Finalimages, Antwort);Generieren Sie in JSP kleine Bild -Tags für Benutzerklicks. Wenn der Benutzer auf das Bild klickt, fügen Sie dem übergeordneten Div ein untergeordnetes Div -Tag hinzu, positionieren Sie es als relativ und setzen Sie Zindex und fügen Sie dann ein IMG -Tag zum Div hinzu, positionieren Sie es als absolut. Wenn der Benutzer klickt, können Sie das Klickenereignis abrufen, die Klick -Koordinaten basierend auf dem Klickereignis abrufen und dann die Koordinaten der übergeordneten DIV abziehen, um die relativen Koordinaten zu erhalten. Sie können den Koordinatenursprung entsprechend Ihren Vorlieben bestimmen. Der Koordinatenursprung ist hier die untere rechte Ecke des 8. Bildes.
<div><br> <div id="base"><br> <img src="<%=request.getContextPath()%>/identify" onclick="clickImg(event)" id="bigPicture"><br> </div><br> <br> </div><br><br> function clickImg(e) { var baseDiv = document.getElementById("base"); var topValue = 0; var linkValue = 0; var obj = basiertIver; while (obj) {linkValue += obj.offsetleft; topvalue += obj.offsettop; obj = obj.offsetparent; } // Lösen Sie das Problem, dass Firefox nicht Klicken Sie auf Ereignisse var clickevent = e? e: (window.event? window.event: null); var clickleft = clickKevent.clientX + document.body.scrollleft - document.body.clientleft - 10; var klicktop = clickKevent.clienty + document.body.scrolltop - document.body.clienttop - 10; var divid = "img_"+index ++; var divele = document.createelement ("div"); divele.setattribute ("id", divid); divele.style.position = "relativ"; divele.style.zindex = index; divele.style.width = "20px"; Divele.Style.Height = "20px"; Divele.Style.Display = "Inline"; divele.style.top = clottop - topvalue - 150 + 10 + "px"; divele.style.left = clickleft - linkValue - 300 + "px"; divele.setattribute ("onclick", "entfernen ('" + divid + "')"); basiertiv.Appendchild (Divele); var imgele = document.createelement ("img"); imgele.src = "<%= request.getContextPath ()%>/ressourcen/timo.png"; imgele.style.width = "20px"; imgele.style.height = "20px"; imgele.style.top = "0px"; imgele.style.left = "0px"; Imgele.Style.position = "Absolute"; imgele.Style.zindex = index; Divele.Appendchild (Imgele); }Nachdem der Benutzer die Anmeldung ausgewählt hat, macht die Serverseite das Urteil basierend auf den ausgewählten Koordinaten des Benutzers.
public list <Neger> ispass (String -Ergebnis) {String [] xylocations = result.split (","); // Speichern Sie auf welchen Bildern die vom Benutzer Falls Liste ausgewählten Koordinaten <Integer> list = new ArrayList <Ganzzahl> (); // Jeder Satz von Koordinaten system.out.println ("Anzahl der ausgewählten Bilder:"+xylocations.length); für (String xylocation: xylocations) {String [] xy = xylocation.split ("// | // |"); int x = Integer.ParseInt (xy [0]); int y = Integer.ParseInt (xy [1]); // 8,4 Bildintervall if (x> -75 && x <= 0) {if (y> -75 && y <= 0) {// no. 8 list.add (8); } else if (y> = -150 && y <= -75) {// no. 4 list.add (4); }} else if (x> -150 && x <= -75) {// 7,3 Bildintervall if (y> -75 && y <= 0) {// Nr. 7 list.add (7); } else if (y> = -150 && y <= -75) {// no. 3 list.add (3); }} else if (x> -225 && x <= -150) {// 6,2 Bildintervall if (y> -75 && y <= 0) {// no. 6 list.add (6); } else if (y> = -150 && y <= -75) {// no. 2 list.add (2); }} else if (x> = -300 && x <= -225) {// 5,1 Bildintervall if (y> -75 && y <= 0) {// no. 5 LIST.ADD (5); } else if (y> = -150 && y <= -75) {// no. 1 list.add (1); }} else {return null; }} Rückgabeliste; }Aktualisieren Sie, um ein neues Bild zu generieren. Da AJAX Binärströme nicht unterstützt, können Sie das native XMLHTTPrequest -Objekt verwenden, um HTML5 -Blob hinzuzufügen, um es zu vervollständigen.
Funktion refresh () {var url = "<%= request.getContextPath ()%>/identifizieren"; var xhr = new xmlhttprequest (); xhr.open ('get', url, wahr); xhr.responsetype = "Blob"; xhr.onload = function () {if (this.status == 200) {var blob = this.response; // BLOB nach dem Laden erfolgreich bigpicture.onload = Funktion (e) {window.url.revokeObjecturl (BigPicture.src); }; BigPicture.src = window.url.createObjecturl (Blob); }} xhr.send ();Der Gesamtcode des Verifizierungscodes wurde abgeschlossen, und es sind noch einige Details zu verarbeiten.
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.