敝校的教务管理系统(貌似不止我们学校用呢),一到选课时间服务器各种崩不解释,有时为了选个课就要反复输入验证码,一想到千千万万的大学生把时间浪费在输入验证码上面,我就觉得,我有义务拯救一下人类。
搜了一下,看到这篇文章,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了。
相关推荐
canvas画验证码
html5 canvas点击刷新验证码提交表单 html5 canvas点击刷新验证码提交表单
This is a digital graphic verification code written in canvas(这是一个vue的插件,使用canvas来生成图形验证码)
:HTML 5中的canvas有个接口getImageData可以用来从验证码图像中取得像素数据。每一个像素有对应r,g,b,a四个值,r,g,b是红绿蓝三色,a是透明度;观察了一下,接下来说下思路及实现代码,感兴趣的你可不哟啊走开啊
如何用canvas手写验证码,看看纯javascript如何打造验证码
jquery canvas绘制图片验证码实例 本文实例为大家分享了jquery canvas绘制图片验证码的具体代码,供大家参考,具体内容如下 CSS .identify-code{ position: absolute; right: 6px; top: 50%; width: 118px;...
js+canvas自制图形验证码,纯js实现,不依赖第三方库。
js+canvas绘制图形验证码.docx
验证码JavaScript利用Canvas生成随机验证码
是用canvas画图做的验证码功能,适合移植到现有项目,安全性高,不易被程序自动破解。
本文实例为大家分享了使用canvas绘制随机验证码的具体代码,供大家参考,具体内容如下 理论基础: 掌握使用canvas绘制线条和圆形以及绘制文字 实现思路: 先构建一个画布,设置一定的宽高(在canvas中设置宽高和在...
使用HTML5和JS实现随机数,注意:此代码仅供娱乐,真正的项目中创建验证码都 是使服务器端技术!!
jquery使用canvas标签绘制验证码 <canvas> 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。 代码如下 css: ...
HTML5 Canvas验证码代码是一款支持英文和数字组合验证码代码。
通过canvas绘制验证码,包括数字,模糊线条,模糊点。
html5 canvas拼图拖到验证码代码,仿QQ第三方登录鼠标拖动滑块图片重叠验证代码。
uniapp 利用canvas绘制图形随机验证码 随机生成数字、字母、颜色、画混淆线条 getRandomCode() { const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; let code = ''; for ...
纯净的前端js验证码,拿来即用 知识点:random,canvas 效果: 生成4位随机数、点击图片换验证码、干扰线。代码简洁易懂,极简