利用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 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 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中根据变量的类型 选择echo或dump
2012/07/05 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
PHP实现的日历功能示例
2018/09/01 PHP
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
Python求解任意闭区间的所有素数
2018/06/10 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
Python random模块的使用示例
2020/10/10 Python
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
服务之星获奖感言
2014/01/21 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
好学生评语大全
2014/05/05 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers