利用html5 canvas破解简单验证码及getImageData接口应用

豪爵挺胸

豪爵挺胸

2016-02-19 11:18

下面,图老师小编带您去了解一下利用html5 canvas破解简单验证码及getImageData接口应用,生活就是不断的发现新事物,get新技能~
敝校的教务管理系统(貌似不止我们学校用呢),一到选课时间服务器各种崩不解释,有时为了选个课就要反复输入验证码,一想到千千万万的大学生把时间浪费在输入验证码上面,我就觉得,我有义务拯救一下人类。

搜了一下,看到这篇文章,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; ic.height; i++){
for(j=0; jc.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; iy2; i++){
for(j=x1; jx2; 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了。
展开更多 50%)
分享

猜你喜欢

利用html5 canvas破解简单验证码及getImageData接口应用

Web开发
利用html5 canvas破解简单验证码及getImageData接口应用

HTML5 Canvas像素处理使用接口介绍

Web开发
HTML5 Canvas像素处理使用接口介绍

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

HTML5 canvas 基本语法

Web开发
HTML5 canvas 基本语法

HTML5 Canvas概述

Web开发
HTML5 Canvas概述

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

html5 canvas-1.canvas介绍(hello canvas)

Web开发
html5 canvas-1.canvas介绍(hello canvas)

HTML5 Canvas 起步(2) - 路径

Web开发
HTML5 Canvas 起步(2) - 路径

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

win10rtm版是什么

win10rtm版是什么

android md5加密与rsa加解密实现代码

android md5加密与rsa加解密实现代码
下拉加载更多内容 ↓