利用html5 canvas破解简单验证码及getImageData接口应用


Posted in HTML / CSS onJanuary 25, 2013

敝校的教务管理系统(貌似不止我们学校用呢),一到选课时间服务器各种崩不解释,有时为了选个课就要反复输入验证码,一想到千千万万的大学生把时间浪费在输入验证码上面,我就觉得,我有义务拯救一下人类。

搜了一下,看到这篇文章,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了。
HTML / CSS 相关文章推荐
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
AmazeUI中模态框的实现
Aug 19 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 #HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 #HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 #HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 #HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 #HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 #HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 #HTML / CSS
You might like
PHP $_FILES函数详解
2011/03/09 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
php use和include区别总结
2019/10/13 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
一道python走迷宫算法题
2018/01/22 Python
python基于Selenium的web自动化框架
2019/07/14 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
python怎么自定义捕获错误
2020/06/29 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
建筑自我鉴定
2013/10/19 职场文书
中秋晚会策划方案
2014/06/12 职场文书
医学生求职信
2014/07/01 职场文书
职工宿舍管理制度
2015/08/05 职场文书
期中考试后的感想
2015/08/07 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP
Python函数中apply、map、applymap的区别
2021/11/27 Python