利用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教程(1):什么是CSS3
Apr 02 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 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代码优化的53个细节
2014/03/03 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
python 性能提升的几种方法
2016/07/15 Python
python万年历实现代码 含运行结果
2017/05/20 Python
python实现大量图片重命名
2020/03/23 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
django queryset相加和筛选教程
2020/05/18 Python
python palywright库基本使用
2021/01/21 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
专升本个人自我评价
2013/12/22 职场文书
电气工程师岗位职责
2014/01/01 职场文书
高中生评语大全
2014/04/25 职场文书
财务部绩效考核方案
2014/05/04 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
新员工入职感想
2015/08/07 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python