利用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 相关文章推荐
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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使用异或实现的加密解密实例
2013/09/04 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
对javascript继承的理解
2016/10/11 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
树结构之JavaScript
2017/01/24 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python简明入门教程
2015/08/04 Python
Python 获取div标签中的文字实例
2018/12/20 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
python获取整个网页源码的方法
2020/08/03 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
分布式数据库需要考虑哪些问题
2013/12/08 面试题
师德学习感言
2014/01/31 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
安全生产年活动总结
2014/08/29 职场文书
python xlwt模块的使用解析
2021/04/13 Python