بما أنني أرغب في القيام بمشروع جديد ، أخطط للقيام برمز التحقق من الصورة البسيط.
دعنا نتحدث عن الفكرة أولاً: على جانب الخادم ، ابحث عن 8 صور من مجلد ، ثم ندمج الصور الثمانية في صورة كبيرة ، وننشئ بشكل عشوائي تصنيف صورة للمستخدمين للتحقق في الصور الثمانية الصغيرة ، مثل الجراء والبيرة ، إلخ. عندما يقوم المستخدم بتسجيل الدخول ، حدد ما إذا كانت الصورة المحددة هي في الواقع صورة التحقق بناءً على جميع الإحداثيات التي حددها المستخدم.
دعنا نضع اثنين من الادخار أولاً:
من أجل جعل بحث الملف أسهل ، يمكن أن يكون بنية ملف الصورة كما يلي:
هذا يسهل توليد الصور الرئيسية التي يريد المستخدم اختيارها ، ودمجها في صورة كبيرة مع 8 صور صغيرة.
الرمز أعلاه: هذا هو تحديد 8 صور ، والتأكد من عدم تكرار الصور المحددة عند تحديد كل صورة.
// SELECT 8 Images Public Static List <Object> geteightimages () {// حفظ مسار كل صورة تحصل عليها للتأكد من عدم تكرار الصورة <string> مسارات = ArrayList جديدة <string> () ؛ file [] FinalImages = ملف جديد [8] ؛ قائمة <Object> Object = new ArrayList <Object> () ؛ // حفظ سلسلة نصائح [] نصائح = سلسلة جديدة [8] ؛ لـ (int i = 0 ؛ i <8 ؛ i ++) {// الحصول على دليل ثانوي عشوائي int dirindex = getRandom (SecondaryDirnumbers) ؛ File SecondaryDir = getFiles () [dirindex] ؛ // حفظ اسم المجلد العشوائي في نصائح إلى نصائح [i] = SecondArydir.getName () ؛ // احصل على الملف في ملف دليل الصورة الثانوي [] الصور = SecondaryDir.ListFiles () ؛ int imageIndex = getRandom (imagerandomindex) ؛ صورة الملف = الصور [ImageIndex] ؛ // صورة devuplication image = dropsameImage (الصورة ، المسارات ، النصائح ، i) ؛ paths.add (image.getPath ()) ؛ FinalImages [i] = Image ؛ } object.add (FinalImages) ؛ object.add (نصائح) ؛ كائن الإرجاع ؛}في إنشاء هذه الصور الثمانية ، احفظ جميع فئات الملفات في صفيف. في هذه الفئة ، يمكنك استخدام أرقام عشوائية لتحديد فئة كفئة رئيسية ، وهي جميع الصور التي يريد المستخدم تحديدها. نظرًا لأن الصفيف قد تم طلبه ، يمكنك اجتياز العناصر الموجودة في المصفوفة للحصول على موقع كل صورة تصنيف مفتاح ، وهو مناسب للمطابقة أثناء التحقق من المستخدم.
// احصل على الموقع ، الذي يتم إرجاع الصورة ، وليس المنشور. بدءًا من 1 ، العنصر الأول من المجموعة هو قائمة TIP العامة الثابتة <Object> getLocation (String [] TIPS) {List <Object> SOCATIONS = New ArrayList <Object> () ؛ // GET KEY CRINSIFICISTION TIP = GETTIP (TIPS) ؛ المواقع. add (tip) ؛ طول int = tips.length ؛ لـ (int i = 0 ؛ i <length ؛ i ++) {if (tip.equals (tips [i])) {socations.add (i+1) ؛ }} مواقع الإرجاع ؛ }بعد اختيار 8 صور ، فإن الخطوة التالية هي دمج الصور. لدمج الصور ، يمكنك استخدام طريقة BufferEdImage: SetRGB () طريقة. إذا كنت لا تفهم ذلك ، فيمكنك قراءة وثائق API ، التي لديها تعليمات مفصلة.
MergeImage الباطل الثابت العام (ملف [] FinalImages ، استجابة httpservletresponse) يلقي ioException {// اقرأ الصورة bufferedimage mergeImage = جديد bufferedImage (800 ، 400 ، bufferedImage.type_int_bgr) ؛ لـ (int i = 0 ؛ i <8 ؛ i ++) {file image = finalImages [i] ؛ bufferedImage BufferedImage = imageio.read (صورة) ؛ عرض int = bufferedImage.getWidth () ؛ ارتفاع int = bufferedimage.getheight () ؛ // اقرأ RGB من الصورة int [] ImageByTes = new int [width*height] ؛ ImageBytes = bufferedImage.getRgb (0 ، 0 ، العرض ، الارتفاع ، imageBytes ، 0 ، العرض) ؛ if (i <4) {mergeImage.setrgb (i*200 ، 0 ، العرض ، الارتفاع ، الصور ، 0 ، العرض) ؛ } آخر {mergeImage.setRgb ((i -4)*200 ، 200 ، العرض ، الارتفاع ، الصور ، 0 ، العرض) ؛ }} imageio.write (mergeImage ، "jpg" ، desponse.getOutputStream ()) ؛ //imageio.write(mergeImage ، "jpg" ، destimage) ؛ }في طبقة وحدة التحكم ، احفظ أولاً تصنيف المفتاح في الجلسة ، وجعل المطالبات والتحقق من الصورة للمستخدمين لاختيار تصنيف الصور. ثم إخراج دفق الصورة إلى الاستجابة لإنشاء صورة التحقق.
استجابة. استجابة. استجابة. استجابة. قائمة <Object> object = pictureselectedHelper.getEightImages () ؛ file [] finalImages = (file []) object.get (0) ؛ string [] tips = (string []) object.get (1) ؛ . نصيحة السلسلة = المواقع. get (0) .ToString () ؛ system.out.println (tip) ؛ session.setAttribute ("tip" ، tip) ؛ المواقع. remove (0) ؛ طول int = المواقع. size () ؛ لـ (int i = 0 ؛ i <length ؛ i ++) {system.out.println ("موقع صورة المفتاح الفعلي:"+socations.get (i)) ؛ } session.setAttribute ("المواقع" ، المواقع) ؛ ImageMerge.mergeImage (النهائيات ، الاستجابة) ؛في JSP ، قم بإنشاء علامات صورة صغيرة لنقرات المستخدم. عندما ينقر المستخدم على الصورة ، أضف علامة DIV الطفل إلى Div الوالد ، ضعها كنسبي ، ثم قم بتعيين Zindex ، ثم إضافة علامة IMG إلى Div ، ضعها على أنها مطلقة. عندما ينقر المستخدم ، يمكنك الحصول على حدث Click ، والحصول على إحداثيات النقر بناءً على حدث Click ، ثم طرح إحداثيات Div الوالد للحصول على الإحداثيات النسبية. يمكنك تحديد أصل الإحداثيات وفقًا لتفضيلاتك. أصل الإحداثيات هنا هو الزاوية اليمنى السفلى من الصورة الثامنة.
<viv> <br> <div id = "base"> <br> <img src = "<٪ = request.getContextPath () ٪>/تحديد" onClick = "clickimg (event)" id = "bigpicture"> <br> </fir> <br> <br> </br> <br> var topValue = 0 ؛ var leftValue = 0 ؛ var obj = ralediv ؛ بينما (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 + "')") ؛ riptiv.appendchild (divele) ؛ var imgele = document.createElement ("img") ؛ imgele.src = "<٪ = request.getContextPath () ٪>/resources/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) ؛ }بعد تحديد المستخدم تسجيل الدخول ، يصدر جانب الخادم الحكم بناءً على إحداثيات المستخدم المحددة.
القائمة العامة <integer> isPass (سلسلة السلسلة) {string [] xylocations = result.split ("،") ؛ // حفظ على الصور التي تحددها الإحداثيات التي تم تحديدها بواسطة قائمة Falls للمستخدم <integer> قائمة = ArrayList 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) {if (y> -75 && y <= 0) {// no. 8 list.add (8) ؛ } آخر إذا (y> = -150 && y <= -75) {// no. 4 list.add (4) ؛ }} آخر إذا (x> -150 && x <= -75) {// 7،3 picture interal if (y> -75 && y <= 0) {// no. 7 list.add (7) ؛ } آخر إذا (y> = -150 && y <= -75) {// no. 3 list.add (3) ؛ }} آخر إذا (x> -225 && x <= -150) {// 6،2 صورة فاصل IF (y> -75 && y <= 0) {// no. 6 list.add (6) ؛ } آخر إذا (y> = -150 && y <= -75) {// no. 2 list.add (2) ؛ }} آخر إذا (x> = -300 && x <= -225) {// 5،1 الفاصل الزمني للصور إذا (y> -75 && y <= 0) {// no. 5 list.add (5) ؛ } آخر إذا (y> = -150 && y <= -75) {// no. 1 list.add (1) ؛ }} آخر {return null ؛ }} قائمة الإرجاع ؛ }تحديث لإنشاء صورة جديدة. نظرًا لأن AJAX لا يدعم التدفقات الثنائية ، يمكنك استخدام كائن XMLHTTPrequest الأصلي لإضافة HTML5 Blob لإكماله.
دالة refresh () {var url = "<٪ = request.getContextPath () ٪>/exption" ؛ var xhr = new xmlhttprequest () ؛ XHR.Open ('get' ، url ، true) ؛ XHR.ResponSetype = "blob" ؛ XHR.Onload = function () {if (this.status == 200) {var blob = this.response ؛ // relect leb بعد التحميل بنجاح bigpicture.onload = function (e) {window.url.revokeObjecturl (bigpicture.src) ؛ } ؛ bigpicture.src = window.url.createBjecturl (blob) ؛ }} xhr.send () ؛تم الانتهاء من الكود الإجمالي لرمز التحقق ، ولا يزال هناك بعض التفاصيل التي يجب معالجتها.
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.