Use html5canvas to crack simple verification code and getImageData interface _ html5 tutorial skills-

Source: Internet
Author: User
: Canvas in HTML5 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 For (j = 0; 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 For (j = x1; 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.