利用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进度条效果
Feb 22 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 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旋转图片90度的方法
2013/11/07 PHP
php获取字段名示例分享
2014/03/03 PHP
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
浅谈js中的闭包
2015/03/16 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
简单的js表格操作
2016/09/24 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
Python使用django搭建web开发环境
2017/06/09 Python
Python使用functools实现注解同步方法
2018/02/06 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
企业文化宣传标语
2014/06/09 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书