تعليق: يحتوي اللوحة في HTML 5 على واجهة getImagedata التي يمكن استخدامها للحصول على بيانات البكسل من صورة رمز التحقق. كل بكسل لديه أربع قيم: R ، G ، B ، أ. R ، G ، B هي حمراء ، أخضر وأزرق ، و A هي الشفافية. بعد مراقبة ، دعنا نتحدث عن الأفكار ورمز التنفيذ. إذا كنت مهتمًا ، ألا تذهب بعيدًا.
لا يتم شرح نظام إدارة الشؤون الأكاديمية في مدرستنا (يبدو أنه أكثر من مجرد مدرستنا) عندما ينهار خادم وقت اختيار الدورة. في بعض الأحيان ، من أجل اختيار الدورة التدريبية ، يجب عليك إدخال رمز التحقق مرارًا وتكرارًا. عندما أفكر في الآلاف من طلاب الجامعات الذين يضيعون الوقت في إدخال رمز التحقق ، أشعر أن لدي التزامًا بإنقاذ الإنسانية.لقد بحثت ورأيت هذا المقال ، كان منذ 3 سنوات. أشرت إلى النصف الأول واستخدمت مكون TarmperMonkey لتحقيق التأثير المطلوب تقريبًا. يمكنك الحصول على هذا البرنامج النصي في UsserScript ، والذي يتوفر أيضًا على Github. الرمز قبيح ، يرجى تصحيح الأخطاء وتعطيني النصيحة.
دعنا نتحدث عن الفكرة: تحتوي اللوحة في HTML 5 على واجهة getImagedata التي يمكن استخدامها للحصول على بيانات البكسل من صورة رمز التحقق. كل بكسل لديه أربع قيم: R ، G ، B ، أ. R ، G ، B هي حمراء ، أخضر وأزرق ، و A هي الشفافية.
وقد لوحظ أن رمز التحقق من نظام إدارة الشؤون الأكاديمية هو 5 أرقام ، وأن حجم الخط لا يزال دون تغيير. على الرغم من أن الخلفية مضطربة ، فمن الواضح أنها تختلف تمامًا عن لون الخط ، لذلك تم استخدام طريقة تقريبية للغاية: نحن نعلم أنه كلما كان اللون أخف وزناً ، كلما زادت قيمة RGB ، اللون الأغمق ، وقيمة RGB أقل. لذلك الحكم على كل نقطة بكسل. مجموع RGB أقل من 350 (تم قياس هذه القيمة) هو وحدات البكسل التي تنتمي إلى الخط. من أجل الملاحظة السهلة ، يتم تعيين قيمة RGB على 255 ، وإلا فإنه يتم ضبطه على 0. وهذا يمنحك صورة ذات خلفية سوداء وشخصيات بيضاء.
var ctx = canvas.getContext ('2d') ؛
CTX.DrawImage (IMG ، 0،0) ؛
var c = ctx.getimagedata (0،0 ، img.width ، img.height) ؛
لـ (i = 0 ؛ i <c.hight ؛ i ++) {
لـ (j = 0 ؛ j <c.width ؛ j ++) {
var x = (i*4)*c.width+(j*4) ؛
var r = c.data [x] ؛
var g = c.data [x+1] ؛
var b = c.data [x+2] ؛
if (r+g+b> 350) {
c.data [x] = c.data [x+1] = c.data [x+2] = 0 ؛
}
آخر{
c.data [x] = c.data [x+1] = c.data [x+2] = 255 ؛
}
}
}
ثم استخدمت أداة الرسم لتكبير الصورة ، ولاحظتها ، ووجدت أن كل رقم مستطيل 12*8 بكسل ، ثم وجدت أن عدد البكسلات المقابلة لكل رقم هو نفسه ، لذلك قمت بإصدار حكم خاص (على سبيل المثال ، إذا كان هناك وحدات البكسل في الوسط ، فيجب أن يكون 8 بدلاً من 0). ثم ... فقط لاحظ ... إحداثيات المصفوفة المقابلة لكل رقم ... اكتب هذه الوظيفة:
وظيفة getNum (imgdata ، x1 ، y1 ، x2 ، y2) {
var num = 0 ؛
لـ (i = y1 ؛ i <y2 ؛ i ++) {
لـ (j = x1 ؛ j <x2 ؛ j ++) {
var x = (i*4)*imgdata.width+(j*4) ؛
if (imgdata.data [x] == 255) num ++ ؛
}
}
التبديل (NUM)
{
الحالة 56: {
J = (x1+x2)/2 ؛
i = (y1+y2)/2 ؛
var x = (i*4)*imgdata.width+(j*4) ؛
إذا (imgdata.data [x] == 255)
العودة 8 ؛
آخر
العودة 0 ؛
}
القضية 30: العودة 1 ؛
الحالة 50: العودة 2 ؛
القضية 51: العودة 3 ؛
القضية 48: العودة 4 ؛
القضية 57: العودة 5 ؛
الحالة 58: {
i = y2-2 ؛
J = x1 ؛
var x = (i*4)*imgdata.width+(j*4) ؛
إذا (imgdata.data [x] == 255)
العودة 9 ؛
آخر
العودة 6 ؛
}
القضية 37: العودة 7 ؛
الافتراضي: إرجاع 0 ؛
}
}
يستخدم النص الأصلي شبكة عصبية للحكم ، ويتم تحسين معدل الدقة بشكل كبير. لا أعرف كيفية استخدامه ، لذلك لا جدوى ...
دقة رمز التحقق التي حصلت عليها باستخدام هذه الطريقة هي أيضًا أكثر من 95 ٪ ، وهو ما يكفي في الوقت الحالي. إذا كان لديك وقت ، يمكنك دراسة الشبكة العصبية.
يمكن للطلاب الذين يحتاجون إليها استخدامه. يجب على متصفح Chrome أولاً تثبيت TarmperMonkey ، و Firefox هو Geasemonkey ، ثم تثبيت هذا البرنامج النصي.