| 标题 | 利用html5 canvas破解简单验证码及getImageData接口应用 |
| 范文 | HTML 5中的canvas有个接口getImageData可以用来从验证码图像中取得像素数据。每一个像素有对应r,g,b,a四个值，r,g,b是红绿蓝三色，a是透明度;观察了一下，接下来说下思路及实现代码. 搜了一下，看到这篇文章，3年前的文章了。我参考了前半部分，借助TamperMonkey这个插件，大概实现了想要的效果。可以在Userscript获取这个脚本，GitHub上面也有，代码写得丑，求debug，求指教。 说下思路：HTML 5中的canvas有个接口getImageData可以用来从验证码图像中取得像素数据。每一个像素有对应r,g,b,a四个值，r,g,b是红绿蓝三色，a是透明度。 观察到教务管理系统的验证码是5个数字，字体字号大小都不变，而且虽然背景虽然有干扰，但是很明显跟字体颜色有很大区别，所以就用了一个很粗糙的方法：我们知道，颜色越浅，rgb值越大，颜色越深，rgb值越少。于是我对每一个像素点进行判断，rgb的和小于350（这个值是测出来的）的就是属于字体的像素，为了方便观察，把它的rgb值都设置为255，否则设置为0。这样就获得了一个黑底白字的图片了。 代码如下: var ctx = canvas.getContext('2d'); ctx.drawImage(img,0,0); var c = ctx.getImageData(0,0,img.width,img.height); for(i=0; i<c.height; i++){ for(j=0; j<c.width; 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; } } } 然后我用画图工具放大图片，观察了一下，得出每个数字是一个12*8像素的矩形，再之后就求出每一个数字对应的像素个数，发现0和8还有6和9的像素个数是一样的，就进行一下特判（比如正中间有像素的就肯定是8而不是0了）。然后……还是观察一下……每个数字对应的矩阵的坐标……写出这个函数： 代码如下: function getNum(imgData,x1,y1,x2,y2){ var num = 0; for(i=y1; i<y2; i++){ for(j=x1; j<x2; 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; } } 原文用了神经网络来判断，准确率大大提高，我不会用，所以就没用了…… 我用这个方法获得的验证码准确率也有95%以上，暂时够用了。有空再研究一下神经网络好了。 有需要的同学可以拿去用，Chrome浏览器要先装TamperMonkey，Firefox则是GeaseMonkey，然后安装这个脚本就ok了。 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。