Utilisez le canevas HTML5 pour déchiffrer un code de vérification simple et les compétences du didacticiel application_html5 de l'interface getImageData

Le système de gestion académique de notre école (il semble être utilisé par plus que notre école), le serveur plante sans explication lorsqu'il s'agit de sélection de cours. Parfois, pour sélectionner un cours, je dois saisir à plusieurs reprises le code de vérification. Quand je pense aux milliers d'étudiants qui perdent leur temps après avoir entré le code de vérification, j'ai senti que j'avais l'obligation de sauver l'humanité.

Après recherche, j'ai vu cet article, qui a été écrit il y a 3 ans. J'ai fait référence à la première moitié et j'ai utilisé le plug-in TamperMonkey pour obtenir à peu près l'effet souhaité. Vous pouvez obtenir ce script sur Userscript, il est également disponible sur GitHub. Le code est moche, veuillez le déboguer, donnez-moi quelques conseils.
Parlons de l'idée : Le canevas en HTML 5 possède une interface getImageData qui peut être utilisée pour obtenir des données de pixels à partir de l'image du code de vérification. Chaque pixel a quatre valeurs correspondant à r, g, b et a. r, g et b sont les trois couleurs rouge, vert et bleu, et a est la transparence.

J'ai observé que le code de vérification du système de gestion éducative est à 5 chiffres et que la taille de la police reste la même. Bien qu'il y ait des interférences en arrière-plan, elle est évidemment très différente de la couleur de la police, j'ai donc utilisé. une très grande méthode approximative : nous savons que plus la couleur est claire, plus la valeur RVB est élevée, et plus la couleur est foncée, plus la valeur RVB est petite. J'ai donc jugé chaque pixel. Si la somme des RVB est inférieure à 350 (cette valeur est mesurée), c'est un pixel appartenant à la police. Pour la commodité de l'observation, je règle sa valeur RVB à 255, sinon elle est définie sur. 0. De cette façon, on obtient une image avec du texte blanc sur fond noir.

Copier le code

Le code est le suivant :

var ctx = canvas.getContext ('2d ');
ctx.drawImage(img,0,0);
var c = ctx.getImageData(0,0,img.width,img.height>for(i=); 0; je< ;c.hauteur; je ){
pour(j=0; jvar x = (i*4)*c.width (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
}
else{
c.data[x] = c; .data[ x 1] = c.data[x 2] = 255;
}
}
}　


Ensuite, j'ai utilisé l'outil de dessin pour agrandir l'image, j'ai observé et avons conclu que chaque nombre A est un rectangle de 12*8 pixels. Ensuite, nous trouvons le nombre de pixels correspondant à chaque nombre. Nous constatons que le nombre de pixels de 0 et 8 et 6 et 9 est le même. faire un jugement spécial (comme positif s'il y a des pixels au milieu, il doit être 8 au lieu de 0). Puis... observez... les coordonnées de la matrice correspondant à chaque nombre... écrivez cette fonction :

Copier le code Le code est le suivant :

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

var num = 0
for(i=y1; i< ;y2; i ){
for(j=x1; jvar x = (i*4)*imgData.width (j*4); data[x] == 255)num
}
}
switch(num)
{
cas 56 :{
j = (x1 x2)/2; >i = ( y1 y2)/2;
var x = (i*4)*imgData.width (j*4);
if(imgData.data[x] == 255)
return 8 ;
autre
retourner 0 ;
}
cas 30 : retourner 1 ;
cas 50 : retourner 2 ;
cas 51 : retourner 3 ; 4;
cas 57:retour 5;
cas 58:{
i = y2-2;
j = x1;
var x = (i*4)*imgData.width ( j*4) ;
if(imgData.data[x] == 255)
return 9;
else
return 6
}
case 37 ; 🎜>par défaut : return 0 ;
}
}


L'article original utilise un réseau de neurones pour porter des jugements, et la précision est grandement améliorée. ça, donc ça ne sert à rien...
Je l'utilise La précision du code de vérification obtenu par cette méthode est supérieure à 95%, ce qui est suffisant pour le moment. Étudions à nouveau les réseaux de neurones quand nous en aurons le temps.
Les étudiants qui en ont besoin peuvent l'utiliser. Le navigateur Chrome doit d'abord installer TamperMonkey, Firefox a besoin de GeaseMonkey, puis installer ce script et tout ira bien.