เนื่องจากฉันต้องการทำโครงการใหม่ฉันวางแผนที่จะทำรหัสการยืนยันภาพอย่างง่าย
มาพูดคุยเกี่ยวกับแนวคิดก่อน: ทางฝั่งเซิร์ฟเวอร์ค้นหา 8 ภาพจากโฟลเดอร์จากนั้นรวมรูปภาพ 8 ภาพเข้าด้วยกันเป็นภาพขนาดใหญ่และสร้างการจำแนกรูปภาพสำหรับผู้ใช้เพื่อตรวจสอบในภาพขนาดเล็ก 8 ภาพเช่นลูกสุนัขเบียร์ ฯลฯ ที่ส่วนหน้าเมื่อเข้าถึงหน้านี้ เมื่อผู้ใช้เข้าสู่ระบบให้ตรวจสอบว่ารูปภาพที่เลือกนั้นเป็นรูปภาพการตรวจสอบตามพิกัดทั้งหมดที่ผู้ใช้เลือกหรือไม่
มาวางสองเรนเดอร์ก่อน:
เพื่อให้การค้นหาไฟล์ง่ายขึ้นโครงสร้างไฟล์รูปภาพอาจเป็นดังนี้:
สิ่งนี้อำนวยความสะดวกในการสร้างภาพสำคัญที่ผู้ใช้ต้องการเลือกและรวมเข้ากับภาพขนาดใหญ่ที่มีภาพขนาดเล็ก 8 ภาพ
รหัสด้านบน: นี่คือการเลือก 8 รูปภาพและตรวจสอบให้แน่ใจว่ารูปภาพที่เลือกจะไม่ถูกทำซ้ำเมื่อเลือกแต่ละภาพ
// เลือก 8 ภาพรายการคงที่สาธารณะ <Ojrop> GetEightImages () {// บันทึกเส้นทางของแต่ละภาพที่คุณจะได้รับเพื่อให้แน่ใจว่าภาพจะไม่ถูกทำซ้ำรายการ <String> เส้นทาง = new ArrayList <String> (); ไฟล์ [] finalImages = ไฟล์ใหม่ [8]; รายการ <jobch> object = new ArrayList <Object> (); // บันทึกสตริงเคล็ดลับ [] เคล็ดลับ = สตริงใหม่ [8]; สำหรับ (int i = 0; i <8; i ++) {// รับไดเรกทอรีรองแบบสุ่ม int diRIndex = getRandom (secondaryDirnumbers); ไฟล์ secondaryDir = getFiles () [diriindex]; // บันทึกชื่อโฟลเดอร์แบบสุ่มในเคล็ดลับถึงเคล็ดลับ [i] = secondarydir.getName (); // รับไฟล์ในไฟล์ไดเรกทอรีภาพทุติยภูมิ [] images = secondarydir.listfiles (); intime ImageIndex = getRandom (imageRandomIndex); image file = images [imageIndex]; // รูปภาพการขจัดข้อมูลซ้ำซ้อน = DropSameImage (รูปภาพ, เส้นทาง, เคล็ดลับ, i); paths.add (image.getPath ()); FinalImages [i] = ภาพ; } Object.add (FinalImages); Object.add (เคล็ดลับ); คืนวัตถุ;}ในการสร้างภาพ 8 ภาพเหล่านี้บันทึกหมวดหมู่ไฟล์ทั้งหมดในอาร์เรย์ ในหมวดหมู่นี้คุณสามารถใช้หมายเลขสุ่มเพื่อเลือกหมวดหมู่เป็นหมวดหมู่คีย์ซึ่งเป็นรูปภาพทั้งหมดที่ผู้ใช้ต้องการเลือก เนื่องจากมีการสั่งซื้ออาร์เรย์คุณสามารถสำรวจองค์ประกอบในอาร์เรย์เพื่อรับตำแหน่งของภาพการจำแนกประเภทคีย์แต่ละภาพซึ่งสะดวกสำหรับการจับคู่ระหว่างการตรวจสอบผู้ใช้
// รับตำแหน่งซึ่งภาพใดที่ถูกส่งคืนไม่ใช่ตัวห้อย เริ่มต้นจาก 1 องค์ประกอบแรกของคอลเลกชันคือ Tip Public Static List <Object> getLocation (เคล็ดลับ String []) {list <jobch> locations = new ArrayList <Object> (); // รับคีย์การจำแนกสตริงเคล็ดลับ = getTip (เคล็ดลับ); locations.add (เคล็ดลับ); ความยาว int = tips.length; สำหรับ (int i = 0; i <length; i ++) {ถ้า (tip.equals (เคล็ดลับ [i])) {locations.add (i+1); }} คืนที่ตั้ง; -หลังจากเลือกรูปภาพ 8 ภาพขั้นตอนต่อไปคือการรวมรูปภาพ ในการผสานรูปภาพคุณสามารถใช้วิธี BufferedImage: วิธี SetRGB () หากคุณไม่เข้าใจคุณสามารถอ่านเอกสาร API ซึ่งมีคำแนะนำโดยละเอียด
Public Static Void Mergeimage (ไฟล์ [] FinalImages, การตอบสนอง httpservletResponse) พ่น IOException {// อ่านภาพบัฟเฟอร์เมจ mergeimage = bufferedImage ใหม่ (800, 400, bufferedimage.type_int_bgr); สำหรับ (int i = 0; i <8; i ++) {image file = finalimages [i]; bufferedImage bufferedImage = imageio.read (รูปภาพ); ความกว้าง int = bufferedImage.getWidth (); ความสูง int = bufferedImage.getheight (); // อ่าน rgb จากภาพ int [] imageBytes = ใหม่ int [ความกว้าง*ความสูง]; ImageBytes = bufferedImage.getRgb (0, 0, ความกว้าง, ความสูง, imageBytes, 0, ความกว้าง); if (i <4) {mergeimage.setrgb (i*200, 0, ความกว้าง, ความสูง, imageBytes, 0, ความกว้าง); } else {mergeimage.setrgb ((i -4)*200, 200, ความกว้าง, ความสูง, imageBytes, 0, ความกว้าง); }} imageio.write (mergeimage, "jpg", response.getOutputStream ()); //imageio.write(mergeimage, "jpg", destimage); -ในเลเยอร์คอนโทรลเลอร์ก่อนอื่นให้บันทึกการจำแนกประเภทคีย์ลงในเซสชันและทำการแจ้งเตือนและการตรวจสอบภาพเพื่อให้ผู้ใช้เลือกการจำแนกรูปภาพ จากนั้นส่งออกสตรีมรูปภาพไปยังการตอบสนองเพื่อสร้างภาพการตรวจสอบ
Response.SetContentType ("Image/JPEG"); Response.Setheader ("Pragma", "No-cache"); Response.Setheader ("แคชควบคุม", "ไม่มีแคช"); Response.setDateHeader ("หมดอายุ", 0); รายการ <jobch> Object = imageselectedHelper.getEightImages (); ไฟล์ [] finalImages = (ไฟล์ []) object.get (0); String [] Tips = (String []) Object.get (1); // ตำแหน่งภาพของคีย์ทั้งหมดนั่นคือรูปภาพที่ผู้ใช้ต้องเลือกรายการ <jobch> locations = imageselectedHelper.getLocation (เคล็ดลับ); tip string = locations.get (0) .toString (); System.out.println (เคล็ดลับ); session.setAttribute ("เคล็ดลับ", เคล็ดลับ); สถานที่ REMOVE (0); ความยาว int = locations.size (); สำหรับ (int i = 0; i <length; i ++) {system.out.println ("ตำแหน่งคีย์ภาพจริง:"+locations.get (i)); } session.setAttribute ("สถานที่", สถานที่); Imagemerge.mergeimage (ขั้นสุดท้าย, การตอบสนอง);ใน JSP ให้สร้างแท็กภาพขนาดเล็กสำหรับการคลิกผู้ใช้ เมื่อผู้ใช้คลิกภาพให้เพิ่มแท็ก DIV เด็กลงใน Div Parent ให้วางตำแหน่งเป็นญาติและตั้งค่า ZINDEX จากนั้นเพิ่มแท็ก IMG ลงใน DIV ให้วางตำแหน่งเป็นสัมบูรณ์ เมื่อผู้ใช้คลิกคุณสามารถรับเหตุการณ์คลิกได้รับพิกัดคลิกตามเหตุการณ์คลิกแล้วลบพิกัดของ Parent Div เพื่อรับพิกัดสัมพัทธ์ คุณสามารถกำหนดต้นกำเนิดพิกัดตามความชอบของคุณ ที่มาพิกัดที่นี่คือมุมขวาล่างของภาพที่ 8
<div> <br> <div id = "base"> <br> <img src = "<%= request.getContextPath ()%>/ระบุ" onClick = "clickimg (เหตุการณ์)" id = "bigpicture"> <br> </div> <br> <br> </div> var topValue = 0; var leftValue = 0; var obj = basediv; ในขณะที่ (obj) {leftValue += obj.offsetleft; topvalue += obj.offsettop; obj = obj.offsetparent; } // แก้ปัญหาที่ Firefox ไม่สามารถคลิกเหตุการณ์ 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 = "ญาติ"; divele.style.zindex = ดัชนี; 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", "ลบ ('" + divid + "')"); Affic.AppendChild (Divele); var imgele = document.createElement ("IMG"); imgele.src = "<%= request.getContextPath ()%>/ทรัพยากร/timo.png"; imgele.style.width = "20px"; imgele.style.height = "20px"; imgele.style.top = "0px"; imgele.style.left = "0px"; imgele.style.position = "สัมบูรณ์"; imgele.style.zindex = ดัชนี; Divele.AppendChild (Imgele); -หลังจากผู้ใช้เลือกเข้าสู่ระบบฝั่งเซิร์ฟเวอร์จะตัดสินตามพิกัดของผู้ใช้ที่เลือก
รายการสาธารณะ <Integer> isPass (สตริงผลลัพธ์) {string [] xylocations = result.split (","); // บันทึกภาพพิกัดที่เลือกโดยผู้ใช้ Falls List <integer> list = new ArrayList <integer> (); // แต่ละชุดของพิกัด System.out.println ("จำนวนผู้ใช้ที่เลือกรูปภาพ:"+xylocations.length); สำหรับ (String xylocation: xylocations) {string [] xy = xylocation.split ("// | // |"); int x = integer.parseint (xy [0]); int y = integer.parseint (xy [1]); // 8,4 ช่วงเวลาภาพถ้า (x> -75 && x <= 0) {ถ้า (y> -75 && y <= 0) {// no 8 list.add (8); } อื่นถ้า (y> = -150 && y <= -75) {// no 4 list.add (4); }} อื่นถ้า (x> -150 && x <= -75) {// 7,3 ช่วงเวลาภาพถ้า (y> -75 && y <= 0) {// no 7 list.add (7); } อื่นถ้า (y> = -150 && y <= -75) {// no 3 list.add (3); }} else if (x> -225 && x <= -150) {// 6,2 ช่วงเวลาภาพถ้า (y> -75 && y <= 0) {// no 6 list.add (6); } อื่นถ้า (y> = -150 && y <= -75) {// no 2 list.add (2); }} else if (x> = -300 && x <= -225) {// 5,1 ช่วงเวลาภาพถ้า (y> -75 && y <= 0) {// no 5 list.add (5); } อื่นถ้า (y> = -150 && y <= -75) {// no 1 list.add (1); }} else {return null; }} รายการส่งคืน; -รีเฟรชเพื่อสร้างภาพใหม่ เนื่องจาก AJAX ไม่รองรับสตรีมไบนารีคุณสามารถใช้วัตถุ XMLHTTPREQUEST ดั้งเดิมเพื่อเพิ่ม HTML5 Blob เพื่อให้เสร็จสมบูรณ์
ฟังก์ชั่นรีเฟรช () {var url = "<%= request.getContextPath ()%>/ระบุ"; var xhr = ใหม่ xmlhttprequest (); xhr.open ('get', url, true); xhr.ResponSetype = "blob"; xhr.onload = function () {ถ้า (this.status == 200) {var blob = this.Response; // ปล่อย blob หลังจากโหลด BigPicture.onload = function (e) {window.url.revokeobjecturl (bigpicture.src); - bigpicture.src = window.url.createObjecturl (หยด); }} xhr.send ();รหัสโดยรวมของรหัสการตรวจสอบเสร็จสมบูรณ์และยังมีรายละเอียดบางอย่างที่จะดำเนินการ
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน