Use html5 canvas to crack simple verification codes and getImageData interface applications

Comments: Canvas in HTML 5 has an interface getImageData that can be used to obtain pixel data from the verification code image. Each pixel corresponds to four values: r, g, B, and a. r, g, and B are red, green, and blue, while a is transparency. After a while, let's talk about the ideas and implementation code, if you are interested, don't go away. The educational administration system of the school (which seems to be not used by our school) will not be explained when the course selection time is reached, sometimes I have to enter verification codes repeatedly to select a course. When thousands of college students waste their time inputting verification codes, I feel that I have an obligation to save humanity.

I searched and saw this article, which was published three years ago. I have referred to the first half of the Article. With the plug-in TamperMonkey, I have achieved the desired effect. You can get this script in Userscript. It is also available on GitHub. The code is ugly. Please debug and ask for advice.
Thoughts: The canvas in HTML 5 has an interface getImageData that can be used to obtain pixel data from the verification code image. Each pixel corresponds to four values: r, g, B, and a. r, g, and B are red, green, and blue, and a is transparency.

It is observed that the verification code of the educational administration system is five digits, and the font size remains unchanged. Although the background is disturbed, it is obviously quite different from the font color, so we use a rough method: we know that the lighter the color, the larger the rgb value, the deeper the color, and the less the rgb value. So I made a judgment on each pixel. The rgb and less than 350 (this value is tested) belong to the font pixels, for convenience of observation, set the rgb values to 255; otherwise, set it to 0. In this way, a black and white image is obtained.

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; 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;
}
Else {
C. data [x] = c. data [x + 1] = c. data [x + 2] = 255;
}
}
}

Then I zoomed in the image with a drawing tool and observed that each number is a 12*8 pixel rectangle. Then I figured out the number of pixels corresponding to each number, if we find that the number of pixels between 0 and 8 is the same as that of 6 and 9, we will make a special decision (for example, if there are pixels in the center, it must be 8 rather than 0 ). Then ...... Let's take a look ...... Coordinates of the matrix corresponding to each number ...... Write this function:

The Code is as follows:
Function getNum (imgData, x1, y1, x2, y2 ){
Var num = 0;
For (I = y1; I <y2; I ++ ){
For (j = x1; j <x2; j ++ ){
Var 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 judge, and the accuracy is greatly improved. I will not use it, so it will be useless ......
The verification code I obtained using this method has an accuracy of more than 95%. It is enough for the time being. I have time to study neural networks.
If you have any need, you can use it. In Chrome, you need to install TamperMonkey first, and in Firefox, It is GeaseMonkey. Then you can install this script.