Karena saya ingin melakukan proyek baru, saya berencana untuk melakukan kode verifikasi gambar sederhana.
Mari kita bicara tentang ide ini terlebih dahulu: di sisi server, temukan 8 gambar dari folder, lalu gabungkan 8 gambar menjadi gambar besar, dan secara acak menghasilkan klasifikasi gambar untuk pengguna untuk memverifikasi dalam 8 gambar kecil, seperti anak anjing, bir, dll. Di ujung depan, ketika mengakses halaman ini, memuat gambar, dan pengguna memilih gambar yang diperlukan pada gambar. Ketika pengguna masuk, tentukan apakah gambar yang dipilih sebenarnya adalah gambar verifikasi berdasarkan semua koordinat yang dipilih oleh pengguna.
Mari kita taruh dua rendering terlebih dahulu:
Untuk membuat pencarian file lebih mudah, struktur file gambar dapat sebagai berikut:
Ini memfasilitasi generasi gambar kunci yang ingin dipilih pengguna, dan menggabungkannya menjadi gambar besar dengan 8 gambar kecil.
Kode di atas: Ini untuk memilih 8 gambar, dan secara rekursif memastikan bahwa gambar yang dipilih tidak akan diulang saat memilih setiap gambar.
// Pilih 8 gambar Daftar Statis Public <Papen> geteighImages () {// Simpan jalur setiap gambar yang Anda dapatkan untuk memastikan bahwa gambar tidak akan diulangi daftar <string> Paths = ArrayList baru <string> (); File [] finalImages = file baru [8]; Daftar <POMPENT> Object = New ArrayList <Papen> (); // Simpan Tips String [] Tips = String baru [8]; untuk (int i = 0; i <8; i ++) {// Dapatkan direktori sekunder acak int dirindex = getRandom (SecondaryDirnumber); File secondarydir = getFiles () [dirindex]; // Simpan nama folder acak dalam tips untuk tip [i] = secondaryDir.getName (); // Dapatkan file dalam file direktori gambar sekunder [] gambar = secondaryDir.listFiles (); int imageIndex = getRandom (imagerandomIndex); Gambar file = gambar [ImageIndex]; // gambar deduplikasi gambar = dropSameImage (gambar, jalur, tips, i); paths.add (image.getPath ()); finalImages [i] = gambar; } object.add (finalImages); Object.add (Tips); mengembalikan objek;}Dalam menghasilkan 8 gambar ini, simpan semua kategori file dalam array. Dalam kategori ini, Anda dapat menggunakan nomor acak untuk memilih kategori sebagai kategori utama, yang merupakan semua gambar yang ingin dipilih pengguna. Karena array dipesan, Anda dapat melintasi elemen -elemen dalam array untuk mendapatkan lokasi setiap gambar klasifikasi kunci, yang nyaman untuk dicocokkan selama verifikasi pengguna.
// Dapatkan lokasi, gambar mana yang dikembalikan, bukan subskrip. Mulai dari 1, elemen pertama dari koleksi ini adalah Tip Public Static List <Papen> getLocation (string [] Tips) {List <Papen> Lokasi = ArrayList baru <POMPERTIFT> (); // Dapatkan Tip String Klasifikasi Kunci = GetTip (Tips); lokasi.add (tip); panjang int = tips.length; untuk (int i = 0; i <panjang; i ++) {if (tip.equals (tips [i])) {locations.add (i+1); }} mengembalikan lokasi; }Setelah memilih 8 gambar, langkah selanjutnya adalah menggabungkan gambar. Untuk menggabungkan gambar, Anda dapat menggunakan metode BufferedImage: SETRGB (). Jika Anda tidak memahaminya, Anda dapat membaca dokumentasi API, yang memiliki instruksi terperinci.
public static void mergeImage (file [] finalImage, httpservletResponse response) melempar ioException {// baca gambar bufferedImage mergeImage = BufferedImage baru (800, 400, bufferedImage.type_int_bgr); untuk (int i = 0; i <8; i ++) {file gambar = finalImages [i]; BufferedImage bufferedImage = imageIO.read (gambar); Int width = bufferedImage.getWidth (); int tinggi = bufferedImage.getHeight (); // Baca RGB dari gambar int [] ImageBytes = int [width*height] baru; ImageBytes = bufferedImage.getrgb (0, 0, lebar, tinggi, gambar, 0, lebar); if (i <4) {mergeimage.setrgb (i*200, 0, lebar, tinggi, gambar, 0, lebar); } else {mergeimage.setrgb ((i -4)*200, 200, lebar, tinggi, gambar, 0, lebar); }} ImageIO.write (mergeImage, "jpg", response.getoutputStream ()); //Imageio.write(mergeImage, "jpg", desttimage); }Di lapisan pengontrol, simpan klasifikasi kunci pertama ke dalam sesi, dan buat petunjuk dan verifikasi gambar bagi pengguna untuk memilih klasifikasi gambar. Kemudian output aliran gambar ke respons untuk menghasilkan gambar verifikasi.
response.setContentType ("Image/JPEG"); response.setheader ("pragma", "no-cache"); response.setheader ("cache-control", "no-cache"); response.setDateheader ("kedaluwarsa", 0); Daftar <POMPENT> Object = ImagesElectedHelper.geteighImages (); File [] finalMages = (file []) object.get (0); String [] Tips = (String []) Object.get (1); // Lokasi gambar dari semua tombol, yaitu, gambar yang harus dipilih pengguna <pestigasi> Lokasi = ImagesElectedHelper.getLocation (Tips); Tip String = Lokasi.get (0) .toString (); System.out.println (tip); session.setAttribute ("tip", tip); Lokasi.Remove (0); int length = locations.size (); untuk (int i = 0; i <panjang; i ++) {System.out.println ("Lokasi gambar kunci aktual:"+locations.get (i)); } session.setAttribute ("Lokasi", Lokasi); Imagemerge.mergeImage (finalImages, response);Di JSP, hasilkan tag gambar kecil untuk klik pengguna. Saat pengguna mengklik gambar, tambahkan tag div anak ke div induk, posisikan relatif, dan atur Zindex, dan kemudian tambahkan tag IMG ke div, posisikan itu sebagai absolut. Ketika pengguna mengklik, Anda bisa mendapatkan acara klik, mendapatkan koordinat klik berdasarkan acara klik, dan kemudian kurangi koordinat div induk untuk mendapatkan koordinat relatif. Anda dapat menentukan asal koordinat sesuai dengan preferensi Anda. Asal koordinat di sini adalah sudut kanan bawah gambar ke -8.
<dv> <br> <div id = "base"> <br> <img src = "<%= request.getContextPath ()%>/identifikasi" onclick = "clickImg (event)" id = "bigpicture"> <br> </div> <br> <br> </div> <br> <br> fungsi clickimg (e); var topValue = 0; var leftValue = 0; var obj = berbasis; while (obj) {leftValue += obj.offsetleft; TopValue += obj.offsettop; obj = obj.offsetparent; } // Selesaikan masalah yang Firefox tidak bisa mendapatkan Klik Acara Var ClickEvent = E? E: (window.event? window.event: null); var clickleft = clickevent.clientx + document.body.scrollleft - document.body.clientleft - 10; var clicktop = clickevent.clienty + document.body.scrolltop - document.body.clienttop - 10; var divid = "img_"+index ++; var divele = document.createelement ("div"); Divele.setAttribute ("id", Divid); divele.style.position = "relatif"; divele.style.zindex = index; divele.style.width = "20px"; divele.style.height = "20px"; divele.style.display = "inline"; divele.style.top = clicktop - topValue - 150 + 10 + "px"; divele.style.left = clickleft - LeftValue - 300 + "px"; Divele.setAttribute ("OnClick", "Remove ('" + Divid + "')"); berbasisv.appendchild (divele); var imgele = document.createElement ("img"); imgele.src = "<%= request.getContextPath ()%>/sumber daya/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); }Setelah pengguna memilih login, sisi server membuat penilaian berdasarkan koordinat pengguna yang dipilih.
Daftar Publik <Integer> ispass (Hasil String) {String [] xylocations = result.split (","); // Simpan di gambar mana yang dikoordinasikan oleh Daftar Pengguna Falls <Integer> Daftar = ArrayList baru <Integer> (); // setiap set koordinat System.out.println ("Jumlah gambar yang dipilih pengguna:"+xylocations.length); untuk (string xylocation: xylocations) {string [] xy = xylocation.split ("// | // |"); int x = integer.parseint (xy [0]); int y = integer.parseint (xy [1]); // interval gambar 8,4 if (x> -75 && x <= 0) {if (y> -75 && y <= 0) {// no. 8 List.add (8); } lain jika (y> = -150 && y <= -75) {// no. 4 list.add (4); }} lain if (x> -150 && x <= -75) {// 7,3 interval gambar if (y> -75 && y <= 0) {// no. 7 List.add (7); } lain jika (y> = -150 && y <= -75) {// no. 3 list.add (3); }} lain if (x> -225 && x <= -150) {// 6,2 interval gambar if (y> -75 && y <= 0) {// no. 6 List.add (6); } lain jika (y> = -150 && y <= -75) {// no. 2 list.add (2); }} lain jika (x> = -300 && x <= -225) {// 5,1 Interval gambar if (y> -75 && y <= 0) {// no. 5 list.add (5); } lain jika (y> = -150 && y <= -75) {// no. 1 list.add (1); }} else {return null; }} daftar pengembalian; }Segarkan untuk menghasilkan gambar baru. Karena AJAX tidak mendukung aliran biner, Anda dapat menggunakan objek XMLHTTPRequest asli untuk menambahkan Blob HTML5 untuk menyelesaikannya.
fungsi refresh () {var url = "<%= request.getContextPath ()%>/identifikasi"; var xhr = xmlhttpRequest baru (); xhr.open ('get', url, true); xhr.responsetype = "blob"; xhr.onload = function () {if (this.status == 200) {var blob = this.response; // Lepaskan gumpalan setelah pemuatan berhasil bigpicture.onload = function (e) {window.url.revokeObjecturl (bigpicture.src); }; bigpicture.src = window.url.createObjecturl (blob); }} xhr.send ();Kode keseluruhan kode verifikasi telah selesai, dan masih ada beberapa detail yang akan diproses.
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.