Use html5 canvas to crack simple verification code and getImageData interface application_html5 tutorial skills

Our school’s academic management system (it seems to be used by more than just our school), the server crashes with no explanation when it comes to course selection. Sometimes, in order to select a course, I have to repeatedly enter the verification code. When I think of thousands of college students wasting their time on After entering the verification code, I felt that I had an obligation to save mankind.

After searching, I saw this article, which was written 3 years ago. I referred to the first half and used the TamperMonkey plug-in to roughly achieve the desired effect. You can get this script at Userscript, it is also available on GitHub. The code is ugly, please debug it, please give me some advice.
Let’s talk about the idea: The canvas in HTML 5 has an interface getImageData that can be used to obtain pixel data from the verification code image. Each pixel has four values ​​corresponding to r, g, b, and a. r, g, and b are the three colors of red, green, and blue, and a is the transparency.

I observed that the verification code of the educational management system is 5 digits, and the font size remains the same. Although there is interference in the background, it is obviously very different from the font color, so I used a very large one. Rough method: We know that the lighter the color, the greater the RGB value, and the darker the color, the smaller the RGB value. So I judged each pixel. If the sum of RGB is less than 350 (this value is measured), it is a pixel belonging to the font. For the convenience of observation, I set its RGB value to 255, otherwise it is set to 0. In this way, a picture with white text on a black background is obtained.

Copy code

The code is as follows:

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

Then I used the drawing tool to enlarge the picture, observed it, and concluded that each A number is a rectangle of 12*8 pixels. Then we find the number of pixels corresponding to each number. We find that the number of pixels of 0 and 8 and 6 and 9 are the same, so we make a special judgment (such as positive If there are pixels in the middle, it must be 8 instead of 0). Then... observe... the coordinates of the matrix corresponding to each number... write this function:

Copy code

The code is as follows:

function getNum(imgData,x1,y1,x2,y2){
var num = 0;
for(i=y1; ifor(j=x1; jvar x = (i*4)*imgData.width (j*4);
if(imgData.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 50:return 2;
case 51:return 3;
case 48:return 4;
case 57:return 5;
case 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:return 7;
default: return 0;
}
}

The original article uses a neural network to make judgments, and the accuracy is greatly improved. I don’t know how to use it, so it’s useless...
I use it The accuracy of the verification code obtained by this method is more than 95%, which is enough for the time being. Let’s study neural networks again when we have time.
Students who need it can use it. Chrome browser needs to install TamperMonkey first, Firefox needs GeaseMonkey, and then install this script and it will be ok.