Pure JS image verification code and compatible with IE6-8 (recommended), jsie6-8

Pure JS image verification code and compatible with IE6-8 (recommended), jsie6-8

I recently want to develop an image verification code function, but I don't want to write the background code myself. So I prepared a front-end verification code function, so I searched the internet and found a plug-in gVerify. js, which is simple and easy to use to achieve perfection. However, later I was told to be compatible with IE8. The Internet Explorer is also quite cool. I didn't want to find a plug-in, so I was ready to do it myself. By the way, I would like to learn and enhance my knowledge. Let's take a look at how I got it done. Although it took a little time, it was worth it.

Usage

It is very easy to use. Define a DIV-verification code input box, introduce the downloaded js plug-in, and create a GVerify object. The parameters can be customized or input the div id. In this way, a verification code is generated. For the effect, see 1-1.

<! DOCTYPE html> 

Figure 1-1
The results are not bad. In minutes, there is no problem with the browser. However, it's GG in IE, and IE9 is still in use, and IE8 is useless. You can only see how it works. So I opened the source code and found that it was implemented by canvas, which is not supported by IE8 or lower. This is embarrassing. Then I went to view the introduction of the canvas Element and found that it was really tricky. "We can even use the <canvas> flag in IE and use open-source JavaScript code (initiated by Google) to build a compatible canvas based on Internet Explorer's VML support. See http://excanvas.sourceforge.net /. ", I felt like I was starting this sentence, so I immediately downloaded an excanvas. when loading js to the page, I thought it would be enough to add a js. The result was also very helpful. When I was about to show off my results, I found it was IE11. Something went wrong! So I found that it was not enough to adjust to IE8, and it was not as simple as I thought. So I read the plug-in source code again, And I found no problem or error. So I can only search to see what the problem is.
Rebuild
After checking the information, we found that the createelement () method plug-in canvas is not supported either under IE8. You can only write the canvas element on the page first. So I modified the page and modified the code for creating the canvas to get it. Added some comments to the source code. The usage is changed to the following:
<! DOCTYPE html> 
The source code has been modified as follows (Red is the modified part) and commented:
! (Function (window, document) {function GVerify (options) {// create a graphical verification code object. The receiving options object is the parameter this. options = {// default options parameter value id: "", // container Id canvasId: "verifyCanvas", // canvas ID width: "100 ", // default canvas width height: "30", // default canvas height type: "blend", // default graphic verification code type: blend: Mixed numeric letters, number: pure number, letter: Pure letter code: ""} if (Object. prototype. toString. call (options) = "[object Object]") {// determine the input parameter type for (var I in options ){/ /Modify the default parameter value this based on the input parameters. options [I] = options [I] ;}} else {// input a single object is id this. options. id = options;} this. options. numArr = ". split (","); // number this. options. letterArr = getAllLetter (); // generates an array of letters this. _ init (); // initialize this. refresh (); // generate Verification Code} GVerify. prototype = {/** version **/version: '1. 0.0 ',/** initialization method **/_ init: function () {var con = document. getElementById (this. options. id); // DIV var c that obtains the verification code Anvas = document. getElementById (this. options. canvasId); // obtain the canvas. IE cannot support canvas. You can add excanvas. js plug-in, but still does not support the createelement () form this. options. width = con. offsetWidth> 0? Con. offsetWidth: "100"; // if there is a width, use your own. If not, the default value is 100 this. options. height = con. offsetHeight> 0? Con. offsetHeight: "30"; // if there is a length, use your own. If not, the default value is 30. // canvas. id = this. options. canvasId; // remove these for IE compatibility // canvas. width = this. options. width; // canvas. height = this. options. height; // canvas. style. cursor = "pointer"; // canvas. innerHTML = "your browser version does not support canvas"; // con. appendChild (canvas); var parent = this; // assign this to parent canvas. onclick = function () {// click the verification code to refresh the parent. refresh () ;}},/** generate Verification Code **/refresh: function () {this. options. code = ""; // define the verification code as "" var canvas = document. getElementById (this. options. canvasId); // obtain the verification code canvas if (canvas. getContext) {// var ctx = canvas. getContext ('2d '); // get the painting object} else {// return;} ctx. textBaseline = "middle"; ctx. fillStyle = randomColor (180,240); ctx. fillRect (0, 0, this. options. width, this. options. height); // draw a rectangle/* x: the abscissa of the starting point of the rectangle (the coordinate origin is the upper left corner of the canvas. Of course, it is the original origin point, and you will understand it when writing it after deformation, currently, no link is needed.) y: rectangular start ordinate width: rectangular length height: rectangular height */if (this. options. type = "blend") {// identify the verification code type. blend: Mixed numeric and letter types, number: pure numbers, and letter: var txtArr = this. options. numArr. concat (this. options. letterArr);} else if (this. options. type = "number") {var txtArr = this. options. numArr;} else {var txtArr = this. options. letterArr ;}for (var I = 1; I <= 4; I ++) {var txt = txtArr [randomNum (0, txtArr. length)]; // get a character this. options. code + = txt; // connection Verification code ctx. font = randomNum (this. options. height/2, this. options. height) + 'px simhei'; // randomly generate the font size ctx. fillStyle = randomColor (50,160); // The filled style randomly generates the font color ctx. shadowOffsetX = randomNum (-3, 3); // The transverse displacement of shadow ctx. shadowOffsetY = randomNum (-3, 3); // the vertical displacement of shadow ctx. shadowBlur = randomNum (-3, 3); // blur the shadow range (the greater the value, the blurrier the value) ctx. shadowColor = "rgba (0, 0, 0, 0.3)"; // The shadow color var x = this. options. width/5 * I; var y = this. options. height/2; var deg = randomNum (-30, 30);/** set the Rotation Angle and coordinate origin ** to translate context. translate (x, y) * x: the coordinate origin is translated to the x axis * y: The coordinate origin is moved to the y axis */ctx. translate (x, y); ctx. rotate (deg * Math. PI/180); // rotate context. rotate (angle) ctx. fillText (txt, 0, 0); // context. fillText (text, x, y)/** restore the Rotation Angle and coordinate origin **/ctx. rotate (-deg * Math. PI/180); ctx. translate (-x,-y);}/** draw interference line **/for (var I = 0; I <4; I ++) {ctx. strokeStyle = randomColor (40,180); // random color ctx. beginPath (); // path context. beginPath () ctx. moveTo (randomNum (0, this. options. width), randomNum (0, this. options. height); // draw the line string context. moveTo (x, y) context. lineTo (x, y) ctx. lineTo (randomNum (0, this. options. width), randomNum (0, this. options. height); ctx. stroke () ;}/ ** draw interference points **/for (var I = 0; I <this. options. width/4; I ++) {ctx. fillStyle = randomColor (0,255); ctx. beginPath (); ctx. arc (randomNum (0, this. options. width), randomNum (0, this. options. height), 1, 0, 2 * Math. PI); // arc context. arc (x, y, radius, starAngle, endAngle, anticlockwise) ctx. fill () ;},/** Verification code **/validate: function (code) {var code = code. toLowerCase (); var v_code = this. options. code. toLowerCase (); // console. log (v_code); if (code = v_code) {return true;} else {this. refresh (); return false ;}}/ ** generate an array of letters **/function getAllLetter () {var letterStr = "a, B, c, d, e, f, g, h, I, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, a, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, u, V, W, X, Y, Z "; return letterStr. split (",");}/** generate a random number **/function randomNum (min, max) {return Math. floor (Math. random () * (max-min) + min);}/** generate a random color **/function randomColor (min, max) {var r = randomNum (min, max); var g = randomNum (min, max); var B = randomNum (min, max); return "rgb (" + r + "," + g + ", "+ B +") ";} window. GVerify = GVerify; // set to window object}) (window, document );
Summary
1. To support IE canvas, you must introduce wxcanvas. js and modify the source code to obtain the canvas Element.
2. Add the div and canvas elements to html.
In Xiuyi wave of my verification code, haha

The above is a small series to introduce you to the pure JS image verification code function and compatible with IE6-8 (recommended), hope to help everyone, if you have any questions please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!