标签：
很多网站在用户进行某次点击，比如在线购物确认购买时，会要求用户输入验证码，这在一般情况下也没啥问题，但在用户需要频繁购买或是抢购时就很讨厌了。其实网站的验证码一般是由JS脚本生成的，因此也可以通过编写自己的JS脚本来实现验证码自动输入。
大致原理如下，首先观察原网页弹出的验证码图片，这里给出两个示例：
，它们都是前景黑白，背景彩色，宽100高20的图片，进一步把图片放到PS里打开可以发现每个数字所占的都是一个宽8高10的矩形，且这5个矩形的位置和相对距离都是固定的。因此，原理就很简单了，事先为每个数字和字母做一个唯一的编码表，每个码都是长为80维的0-1编码，0代表当前数字(字母)在这个小矩形里是背景，1则代表是前景，这样所有数字和字母都有自己唯一的编码。每次随机生成一幅新的验证码图后，只要把这5个数字(字母)对应的小矩形取出来，然后依次遍历那80个像素，得到一个长为80的编码，再去与编码表一一匹配，就知道具体是哪个数字(字母)了。代码如下：
1 var captcha = ‘‘; /* 验证码 */ 2 var canvas = document.createElement(‘canvas‘); 3 canvas.width = ‘100‘; /* 验证码图片宽度 */ 4 canvas.height = ‘20‘; /* 验证码图片高度 */ 5 canvas.style.display = ‘none‘; 6 document.body.appendChild(canvas); /* 将这一部分也加入到网页代码中 */ 7 var context = canvas.getContext(‘2d‘); 8 var image = new Image(); 9 image.src = document.getElementById(‘coderefresh‘).src; 10 image.onload = function() { 11 context.drawImage(image, 0, 0); 12 for (var i = 0; i < 5; i++) { /* 5位验证码，依次处理 */ 13 var dbString = ‘‘; 14 var canvasData = context.getImageData(27 + 9 * i, 5, 8, 10); /* 上面的例子第一个小矩形左上角的坐标是(27,5)，然后依次偏移9就是下一个小矩形 */ 15 for (var j = 0; j < canvasData.data.length; j += 4) { 16 var r = canvasData.data[j + 0]; 17 var g = canvasData.data[j + 1]; 18 var b = canvasData.data[j + 2]; 19 /* 验证码字符只有黑白两种纯色, 背景色均为其它RGB值 */ 20 if (!((r == 0 && g == 0 && b == 0) || (r == 255 && g == 255 && b == 255))) 21 dbString += ‘0‘; 22 else 23 dbString += ‘1‘; 24 } 25 for (var k = 0; k < 36; k++) { /* 去编码表进行匹配 */ 26 if (dbString == characters[0][k]) /* 匹配成功 */ 27 break; 28 } 29 captcha += characters[1][k]; 30 } 31 /* 加入购物车 */ 32 var reslut_list = new Array(); 33 reslut_list.push(window.location.pathname.match(/\d+/)[0]); 34 reslut_list.push(captcha); 35 addToCart(reslut_list); 36 }
标签：
原文地址：http://www.cnblogs.com/murongxixi/p/4480290.html
