利用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 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
css弧边选项卡的项目实践
May 07 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 addslashes 函数详细分析说明
2009/06/23 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
php下将XML转换为数组
2010/01/01 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
Bootstrap基础学习
2015/06/16 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
Web技术实现移动监测的介绍
2017/09/18 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
Python中除法使用的注意事项
2014/08/21 Python
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
Python格式化css文件的方法
2015/03/10 Python
Python解决八皇后问题示例
2018/04/22 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
python opencv实现图像边缘检测
2019/04/29 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
使用python模拟高斯分布例子
2019/12/09 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
关于人生的感言
2014/01/17 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis