本篇内容主要讲解“如何利用html5 canvas破解简单验证码”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何利用html5 canvas破解简单验证码”吧!

创新互联建站不只是一家网站建设的网络公司；我们对营销、技术、服务都有自己独特见解，公司采取“创意+综合+营销”一体化的方式为您提供更专业的服务！我们经历的每一步也许不一定是最完美的，但每一步都有值得深思的意义。我们珍视每一份信任，关注我们的成都网站制作、成都网站建设、外贸营销网站建设质量和服务品质，在得到用户满意的同时，也能得到同行业的专业认可，能够为行业创新发展助力。未来将继续专注于技术创新，服务升级，满足企业一站式网络营销推广需求，让再小的品牌网站设计也能产生价值！

代码如下:

var ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0);
var c = ctx.getImageData(0,0,img.width,img.height);
for(i=0; ifor(j=0; jvar 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;
}
}
}

然后我用画图工具放大图片，观察了一下，得出每个数字是一个12*8像素的矩形，再之后就求出每一个数字对应的像素个数，发现0和8还有6和9的像素个数是一样的，就进行一下特判（比如正中间有像素的就肯定是8而不是0了）。然后……还是观察一下……每个数字对应的矩阵的坐标……写出这个函数：

代码如下:

function getNum(imgData,x1,y1,x2,y2){
var num = 0;
for(i=y1; ifor(j=x1; jvar 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;
}
}

原文用了神经网络来判断，准确率大大提高，我不会用，所以就没用了……
我用这个方法获得的验证码准确率也有95%以上，暂时够用了。有空再研究一下神经网络好了。
有需要的同学可以拿去用，Chrome浏览器要先装TamperMonkey，Firefox则是GeaseMonkey，然后安装这个脚本就ok了。

到此，相信大家对“如何利用html5 canvas破解简单验证码”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

文章标题：如何利用html5canvas破解简单验证码
标题来源：http://scyanting.com/article/jeeedi.html