Gunakan kanvas html5 untuk memecahkan kod pengesahan mudah dan dapatkan kemahiran tutorial antara muka ImageData application_html5

Sistem pengurusan akademik sekolah kami (nampaknya digunakan oleh lebih daripada sekadar sekolah kami), pelayan ranap tanpa penjelasan apabila melibatkan pemilihan kursus Kadang-kadang, untuk memilih kursus, saya perlu memasukkan kod pengesahan berulang kali. Apabila saya memikirkan beribu-ribu pelajar kolej membuang masa mereka selepas memasukkan kod pengesahan, saya merasakan bahawa saya mempunyai kewajipan untuk menyelamatkan manusia.

Setelah mencari, saya melihat artikel ini, yang ditulis 3 tahun lalu. Saya merujuk kepada separuh masa pertama dan menggunakan pemalam TamperMonkey untuk mencapai kesan yang diingini secara kasar. Anda boleh mendapatkan skrip ini di Userscript, ia juga tersedia di GitHub Kod itu hodoh, sila nyahpepijat, sila beri saya nasihat.
Mari bincangkan idea itu: Kanvas dalam HTML 5 mempunyai antara muka getImageData yang boleh digunakan untuk mendapatkan data piksel daripada imej kod pengesahan. Setiap piksel mempunyai empat nilai yang sepadan dengan r, g, b, dan a r, g, dan b ialah tiga warna merah, hijau dan biru, dan a ialah ketelusan.

Saya perhatikan bahawa kod pengesahan sistem pengurusan pendidikan ialah 5 digit, dan saiz fon kekal sama Walaupun terdapat gangguan di latar belakang, ia jelas sangat berbeza daripada warna fon, jadi saya gunakan yang sangat besar kaedah kasar: Kita tahu bahawa lebih terang warna, lebih besar nilai RGB, dan lebih gelap warna, lebih kecil nilai RGB. Jadi saya menilai setiap piksel Jika jumlah RGB kurang daripada 350 (nilai ini diukur), ia adalah piksel kepunyaan fon Untuk kemudahan pemerhatian, saya menetapkan nilai RGBnya kepada 255, jika tidak, ia ditetapkan kepada 0. Dengan cara ini, gambar dengan teks putih pada latar belakang hitam diperolehi.

Salin kod

Kod adalah seperti berikut:

var ctx = canvas.getContext ('2d ');
ctx.drawImage(img,0,0); 0; i< ;c.tinggi; i ){
untuk(j=0; jvar x = (i*4)*c.lebar (j*4);
var r = c.data[x];
var g = c.data[x 1];
var b = c.data[x 2]; ){
c.data[x] = c.data[x 1] = c.data[x 2] = 0;
}
lain{
c.data[x] = c .data[ x 1] = c.data[x 2] = 255;
}
}
}　


Kemudian saya menggunakan alat lukisan untuk membesarkan gambar, diperhatikan ia, dan membuat kesimpulan bahawa setiap nombor A ialah segi empat tepat 12*8 piksel Kemudian kita dapati bilangan piksel yang sepadan dengan setiap nombor Kita dapati bahawa bilangan piksel 0 dan 8 dan 6 dan 9 adalah sama, jadi kita buat pertimbangan khas (seperti positif Jika terdapat piksel di tengah, ia mestilah 8 bukannya 0). Kemudian... perhatikan... koordinat matriks yang sepadan dengan setiap nombor... tulis fungsi ini:

Salin kod

Kodnya adalah seperti berikut:

fungsi getNum(imgData,x1,y1,x2,y2){

var num = 0;

for(i=y1; i< ;y2; i ){
untuk(j=x1; jvar x = (i*4)*imgData.width (j*4); data[x] == 255)nombor ;
}
}
suis(nombor)
{
kes 56:{
j = (x1 x2)/2; >i = ( y1 y2)/2;
var x = (i*4)*imgData.width (j*4); 8;
lain
kembali 0;
}
kes 30:kembali 1;
kes 50:kembali 2; 4;
kes 57:kembali 5;
kes 58:{
i = y2-2; j*4) ;
jika(imgData.data[x] == 255)
kembali 9;
kembali 6; 🎜>lalai: pulangkan 0;
}
}


Artikel asal menggunakan rangkaian saraf untuk membuat pertimbangan, dan ketepatannya dipertingkatkan dengan baik ia, jadi ia tidak berguna...
Saya menggunakannya Ketepatan kod pengesahan yang diperolehi melalui kaedah ini adalah lebih daripada 95%, yang cukup buat masa ini. Mari kita kaji rangkaian saraf sekali lagi apabila kita mempunyai masa.
Pelajar yang memerlukannya boleh menggunakannya pelayar Chrome perlu memasang TamperMonkey terlebih dahulu, Firefox memerlukan GeaseMonkey, dan kemudian memasang skrip ini dan ia akan menjadi ok.