Verwenden Sie HTML5-Canvas, um einfachen Bestätigungscode zu knacken und Tutorial-Fähigkeiten für die ImageData-Schnittstelle application_html5 zu erhalten

Das akademische Verwaltungssystem unserer Schule (es scheint von mehr als nur unserer Schule genutzt zu werden) stürzt bei der Kursauswahl ohne Erklärung ab. Manchmal muss ich den Bestätigungscode wiederholt eingeben, um einen Kurs auszuwählen. Wenn ich an Tausende von College-Studenten denke, die ihre Zeit damit verschwenden, den Bestätigungscode einzugeben, fühlte ich mich verpflichtet, die Menschheit zu retten.

Nachdem ich gesucht habe, habe ich diesen Artikel gesehen, der vor 3 Jahren geschrieben wurde. Ich habe mich auf die erste Hälfte bezogen und das TamperMonkey-Plugin verwendet, um ungefähr den gewünschten Effekt zu erzielen. Sie können dieses Skript bei Userscript herunterladen, es ist auch auf GitHub verfügbar. Der Code ist hässlich, bitte debuggen Sie ihn, bitte geben Sie mir einen Rat.
Lassen Sie uns über die Idee sprechen: Der Canvas in HTML 5 verfügt über eine Schnittstelle getImageData, mit der Pixeldaten aus dem Verifizierungscodebild abgerufen werden können. Jedes Pixel hat vier Werte, die r, g, b entsprechen, und a, r, g und b sind die drei Farben Rot, Grün und Blau, und a ist die Transparenz.

Ich habe festgestellt, dass der Bestätigungscode des Bildungsmanagementsystems 5 Ziffern hat und die Schriftgröße gleich bleibt. Obwohl es im Hintergrund Störungen gibt, unterscheidet sie sich offensichtlich stark von der Schriftfarbe, die ich verwendet habe eine sehr große Methode: Wir wissen, dass der RGB-Wert umso größer ist, je heller die Farbe ist, und je dunkler die Farbe ist. Wenn die RGB-Summe kleiner als 350 ist (dieser Wert wird gemessen), stelle ich der Einfachheit halber den RGB-Wert auf 255 ein 0. Auf diese Weise entsteht ein Bild mit weißem Text auf schwarzem Hintergrund.

Code kopieren

Der Code lautet wie folgt:

var ctx = canvas.getContext ('2d ');
ctx.drawImage(img,0,0);
var c = ctx.getImageData(0,0,img.width,img.height); 0; i< ;c.height; i ){
for(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;
}
}
}　


Dann habe ich das Bild mit dem Zeichenwerkzeug vergrößert, beobachtet Daraus schließen wir, dass jede A-Zahl ein Rechteck von 12*8 Pixeln ist. Dann finden wir die Anzahl der Pixel, die jeder Zahl entspricht. Wir stellen fest, dass die Anzahl der Pixel von 0 und 8 sowie von 6 und 9 gleich ist Treffen Sie ein besonderes Urteil (z. B. positiv) Wenn sich in der Mitte Pixel befinden, müssen es 8 statt 0 sein. Dann... beobachten... die Koordinaten der Matrix, die jeder Zahl entspricht... schreiben Sie diese Funktion:

Code kopieren

Der Code lautet wie folgt:

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)
{
case 56:{
j = (x1 x2)/2; >i = ( y1 y2)/2;
var x = (i*4)*imgData.width (j*4);
if(imgData.data[x] == 255)
return 8;
else
return 0;
case 30:return 1;
case 51:return 3; 4;
case 57:return 5;
case 58:{
i = y2-2;
var x = (i*4)*imgData.width ( j*4) ;
if(imgData.data[x] == 255)
return 9;
else
return 6;
case 37:return 7; 🎜>Standard: return 0;
}
}


Der Originalartikel verwendet ein neuronales Netzwerk, um Urteile zu fällen, und die Genauigkeit ist erheblich verbessert Es ist also nutzlos ...
Ich benutze es. Die Genauigkeit des mit dieser Methode erhaltenen Bestätigungscodes beträgt mehr als 95 %, was vorerst ausreicht. Lassen Sie uns die neuronalen Netze noch einmal studieren, wenn wir Zeit haben.
Studenten, die es benötigen, können es verwenden. Der Chrome-Browser muss zuerst TamperMonkey installieren, Firefox benötigt GeaseMonkey und dann dieses Skript installieren, dann ist es in Ordnung.