一个超友好的验证码的识别javascript

基本上每次都在用不同语言搞着不同的事，这一次用的是javascript，做一个简单的验证码识别的Chrome扩展。

原本计划着可能要做个小程序与Chrome扩展利用nativemessaging 进行交互，但事实上那个验证码实在是太友好了，直接用javascript也很简单。





验证码图片就类似于这样，旁边有很多的噪点，但是不会出现在数字上，数字没有任何变形位置是固定的，而且还只有加法都不带减法的，非常的友好。

var img=document.getElementById('cimage_portal'); //获取验证码图片
var txtBox=document.getElementById('valCode1');   //获取验证码输入框

var keyNum=new Array();  //下面的一串就是验证码识别比对用的
keyNum["000110000110000110"]=1;
keyNum["000001000011000110"]=2;
keyNum["000111000001000000"]=3;
keyNum["011001110001111111"]=4;
keyNum["111001000000000000"]=5;
keyNum["110111111001110000"]=6;
keyNum["000011000110001100"]=7;
keyNum["001111011001110000"]=8;
keyNum["011001001110000000"]=9;
keyNum["110000110000110000"]=0;
keyNum["000000000000000000"]=-1;  //没有数字

var canvas = document.createElement('canvas');  //建立一个 canvas 存放图片
var ctx =canvas.getContext('2d');

function getPic(x,y,l,w)   //用以获取指定位置的数字
{
document.body.appendChild(canvas);  //把canvas画出来看看，会出现在网页底部。
var imgData=ctx.getImageData(x,y,l,w);
ctx.putImageData(imgData,30,30);  // 把切下来的一小片也给画了出来
console.log(imgData.data.length);
var str="";
for(j=0;j<imgData.data.length;j+=4)  //为什么+4，这个imgData的存储形式有关
if(imgData.data[j]<225&&imgData.data[j+1]<225&&imgData.data[j+2]<225)
str=str.concat("0");
else
str=str.concat("1");
console.log(str);
return keyNum[str];  //以01形式的像素代码作为键名，获取键值
}

img.onload = function(){
console.log(img.offsetWidth);
console.log(img.offsetHeight);

ctx.fillStyle="#FF0000";
ctx.drawImage(img,0,0);
img.crossOrigin='';    //解决getImageData 的跨域问题，这个很重要

var m=getPic(5,11,6,3);
var i=getPic(14,11,6,3);
if(i!=-1)
m=m*10+i;
var n = getPic(45,11,6,3);
i=getPic(54,11,6,3);
if(i!=-1)
n=n*10+i;
console.log(m+n);
txtBox.value=m+n;

}

插件就截取了数字中的中间一小片就18个像素点作为比对依据，已经能对每一个数字进行区分。

在遍历像素点时遇到白色就在字符串中添个1，其他的就添个0。本来还进行了去噪，二值化等一系列操作，但是验证码实在是友好，这些操作都免了。最后只要在array取出对应的数字，就好了。

运行时让canvas 出现在网页的底部了。

最初的时候还打算用tesseract 这样的东西进行识别，网上有很多的教程，也折腾了一段时间，但是尽管是这么规则的数字，识别出来的准确率并不高，那个问号都会识别成7。自己做的这个反倒是识别率 100%。还是要感谢验证码这么友好。

接下来就能自动登录，有些事情就可以批量搞了。