HTML5 canvas验证码识别

canvas 的历史

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
canvas 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 canvas 标记。
我们甚至可以在 IE 中使用 canvas 标记,并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码(由 Google 发起)来构建兼容性的画布。 参见:http://excanvas.sourceforge.net/。
canvas 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进,目前 canvas 已经成为 HTML 5 草案中一个正式的标签。 参见:URL

验证码生成规律

首页我们得观察验证码图片生成规律,通过多次刷新出不同图片来辨别;本文中的验证码由四个数字组成,且每个数字除了颜色随机改变,形状和位置是固定不变的。验证码识别

上图效果实现:打开Photoshop,把网页中的验证码图片拖进来,然后再拖出几根参考线,让每两根参考线包围一个数字,一开始肯定有偏差,再次刷新页面,按住shift键把验证码图片拖到photoshop中,微调参考线的位置,经过多次操作;

根据在横向上来看,验证码图片中的第一个数字是从6px开始的,然后每个数字占了9px,中间间隔是8px.于是我们可以得出一个公式,x=17*i+6,i表示数字的索引[0,1,2,3],x表示横坐标

纵向上比较简单,y坐标的范围是恒定的,9px到14px.

图像处理

首先,我并没有专业的图像处理知识,所以下面说的专业词汇肯定是有问题的,以理解为主.由于数字和背景都是随机颜色的,那么我们生成的模板字符串岂不是每次都会变吗.的确是这样的,由于canvas在获取某个像素点的像素值时,返回的是rgba值.也就是一共有四个值.我们需要使用一个公式,把rgba颜色转换成灰度值:gray = r*0.3 + g*0.59 + b*0.11,灰度值的范围是0~255,我这里把128看成临界点,也就是把0~128看成是暗,用0表示,128~255看成是明,用1表示,我把明暗简写为ld(Light and Dark).也就是公式,ld = gray>128?1:0.为什么通过明暗值能把数字和背景色区分开来呢,因为这种验证码在进行灰度化以后,背景明显是属于亮的,偏白色,而数字是属于暗的,偏黑色.所以能够区分.

通过photoshop灰度化的效果

huiduhua
再进行50%阀值
50

生成模板

既然每个数字的形状和位置都是一定的,那我们就能把0-9这10个数字的像素信息存储下来作为模板,在识别验证码时,取出验证码图片中的数字依次对比.如果相等说明就是这个数字.下面是我写的生成模板的代码.

var image = document.querySelector("#validate");                 //获取到验证码图片
var canvas = document.createElement('canvas');                        //新建一个canvas
var ctx = canvas.getContext("2d");                                    //获取2D上下文
var numbers = [];                                                     //存储数字模板的数组
canvas.width = image.width;                                           //设置canvas的宽度
canvas.height = image.height;                                         //设置canvas的高度
document.body.appendChild(canvas);                                    //将canvas添加进文档
ctx.drawImage(image, 0, 0);                                           //将验证码绘制到canvas上
for (var i = 0; i < 4; i++) {                                         //循环四次,识别四个数字
    var pixels = ctx.getImageData(17 * i + 6, 6, 9, 14).data;         //按照公式获取到每个数字上的像素点
    var ldString = "";                                                //用来存储明暗值的字符串
    for (var j = 0, length = pixels.length; j < length; j += 4) {                 //每次循环取四个值,分别是一个像素点的r,g,b,a值
        ldString = ldString + (+(pixels[j] * 0.3 + pixels[j + 1] * 0.59 + pixels[j + 2] * 0.11 >= 128));     //灰度化+二值化,但我们并没有真正的处理图像
    }                 
    console.log(ldString);                 //输出存储着明暗值的字符串
}

识别验证码

var image = document.querySelector("#validate");       //如果要用在greasemonkey脚本里,可以把下面的代码放在image的onload事件里          
var canvas = document.createElement('canvas');                 
var ctx = canvas.getContext("2d");                 
//模板,依次是0-9十个数字对应的明暗值字符串
var numbers = [                           
"001111100011111110111000110110000111110000111010000011110000011110000011110000011111000011110000111111000110011111110001111100",
"000001100000011100000111100011111100011101101000001110100001100000001100000000100000001100000001100000001100000011100000001100",
"001111100011111110111001111110000011010010011000000111000001110000011110000111100001111000011110000111100000111111111101111101",
"011111000111111100110101110110000110000001110000011100000111100000111110000000110000000110110000110110001110111111100011111000",
"000000110000001100000011110000111110000110110001101110011100110011000110110000110111111111111111111000000110000000110000000110",
"011111110011111110011000000011000000111000000111111100111111110110000111000000001000000011110000111110000111111111110011111100",
"001111100011111110011000111110000011110000100111111100111111110111000111110000011110000011110000011111100111011111110001111100",
"111111111111111111000000110000001100000011100000011000000111000001110000000110000010110000001100000001100000001100000001100000",
"001110100011111110111000110110000110111001110011101110011111100111111110110000111110000011110000011111000111011111110001111100",
"001111100011111110111000110010000011110000011110000011100000111111101111011111111000110111010000111110000110011111010011011100"];
//存放识别后的验证码
var captcha = "";                         
canvas.width = image.width;
canvas.height = image.height;
document.body.appendChild(canvas);
ctx.drawImage(image, 0, 0);
for (var i = 0; i < 4; i++) {
    var pixels = ctx.getImageData(17 * i + 6, 6, 9, 14).data;
    var ldString = "";
    for (var j = 0,length = pixels.length; j < length; j += 4) {
        ldString = ldString + (+(pixels[j] * 0.3 + pixels[j + 1] * 0.59 + pixels[j + 2] * 0.11 >= 140));
    }
    var comms = numbers.map(function (value) {                      //为了100%识别率,这里不能直接判断是否和模板字符串相等,因为可能有个别0被计算成1,或者相反
        return ldString.split("").filter(function (v, index) {
            return value[index] === v
        }).length
    });
    captcha += comms.indexOf(Math.max.apply(null, comms));          //添加到识别好的验证码中
}

console.log(captcha);

新一学习总结

根据紫云飞博文学习了通过canvas来重新绘制验证码;再根据验证码的规律进行识别,正常可以通过他的位置,字体,大小,来识别;看到《使用Canvas进行验证码识别》说本文中的代码只能识别初级代码;负责的验证码需要自己重新整合规律,逻辑进行匹配的;有些人眼都不能够一眼识别;机器识别的难度会更难;

转载请注明来源:新一 » HTML5 canvas验证码识别

赞 (1) 评论 (0) 分享 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址