您现在的位置是：网站首页> 编程资料编程资料

利用html5 canvas破解简单验证码及getImageData接口应用用canvas显示验证码的实现canvas基础之图形验证码的示例canvas实现滑动验证的实现示例

2021-09-01 962人已围观

简介：HTML 5中的canvas有个接口getImageData可以用来从验证码图像中取得像素数据。每一个像素有对应r,g,b,a四个值，r,g,b是红绿蓝三色，a是透明度;观察了一下，接下来说下思路及实现代码，感兴趣的你可不哟啊走开啊

敝校的教务管理系统（貌似不止我们学校用呢），一到选课时间服务器各种崩不解释，有时为了选个课就要反复输入验证码，一想到千千万万的大学生把时间浪费在输入验证码上面，我就觉得，我有义务拯救一下人类。

搜了一下，看到这篇文章，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; ifor(j=0; jvar 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了）。然后……还是观察一下……每个数字对应的矩阵的坐标……写出这个函数：

复制代码

代码如下:

原文用了神经网络来判断，准确率大大提高，我不会用，所以就没用了……
我用这个方法获得的验证码准确率也有95%以上，暂时够用了。有空再研究一下神经网络好了。
有需要的同学可以拿去用，Chrome浏览器要先装TamperMonkey，Firefox则是GeaseMonkey，然后安装这个脚本就ok了。

上一篇：利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位Html5 Geolocation获取地理位置信息实例HTML5的Geolocation地理位置定位API使用教程html5指南-4.使用Geolocation实现定位功能html5指南-7.geolocation结合google maps开发一个小的应用使用HTML5 Geolocation实现一个距离追踪器

下一篇：HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述解决HTML5手机端页面缩放的问题HTML5实现可缩放时钟代码可使任何HTML元素动态缩放适合父元素的js插件scalable.jsHtml5之svg可缩放矢量图形_动力节点Java学院整理HTML5全屏响应式缩放切换幻灯片代码用HTML5实现鼠标滚轮事件放大缩小图片的功能HTML5基于SVG实现可拖拽和缩放的世界地图效果源码HTML5添加禁止缩放功能

您现在的位置是：网站首页> 编程资料编程资料

利用html5 canvas破解简单验证码及getImageData接口应用用canvas显示验证码的实现canvas基础之图形验证码的示例canvas实现滑动验证的实现示例

相关内容

点击排行

本栏推荐

猜你喜欢