|
|
|
|
公众号矩阵

用 JS 实现了识别网页验证码的功能!

当时我写代码的时候,没有找到纯 js 可以用的代码和库,不能打包成 chrome 扩展,用起来还是不太方便的。所以在验证了思路的可行性后,我就大致写下来,给他人以方便吧。

作者:LeoNaN来源:Web开发|2021-07-22 10:25

很高兴大家喜欢!Github:leonof/imgRecJs[1],刚刚上传,代码还需要完善~因为有不少同学表示训练和识别有疑问,我做了个小接口放在最后,可以方便大家先把流程走通。

后续会更新:将 js 代码等打包成 chrome 扩展程序,这样就可以让浏览器自动识别,完全傻瓜式使用啦~!(更新啦:利用 chrome 扩展,让浏览器执行我们的脚本[2])

其实整篇文章难度不高,网上也有很多 java、c 等的代码。只是当时我写代码的时候,没有找到纯 js 可以用的代码和库,不能打包成 chrome 扩展,用起来还是不太方便的。所以在验证了思路的可行性后,我就大致写下来,给他人以方便吧。

目前有多种验证码识别思路,限于能力有限,我只好采用了最简单的机器学习。目标验证码也比较简单,如:

(含字母也一样)

识别控制速度在 0.1 秒以内的话,正确率在 99.99999%(因为一直是识别正确哈哈哈)。

在动手之前,先梳理一下大致思路,方便比较独立的同学自己尝试完成代码:

1、先分析网页 DOM 结构,载入验证码图片。

2、将图片画到 canvas 上,拿到图片的像素数据。

3、先后对图片进行二值化、腐蚀膨胀、切割、旋转、缩放处理。

4、记录处理后的单个数字的二值化数据,并人工录入真实数字。

5、重复训练。

6、识别时,用处理后的图像与库中数据对比,取得最相近的数据,得到真实数字。

(以下优化)

7、数据量大时,可以取前几个相似数据,并按权重从中选出最可能的数字,以提高准确度。

8、也可查找到相似度足够高时停止搜索,取其作为最后识别结果,以提升效率。

大神们可以直接去写了,我这低级简单的代码会遭你们嘲笑的。。。比较急于求成的同学也可以不用看了,回头直接拿 demo 去修改吧!

好吧既然你看到这里了,我就尽量说的清楚明白一点。

在动手之前,我简单模拟一下需要输入验证码的网站,效果如下:

好吧,是真的简单…点击图片可以更换验证码,输入框用来输入,按钮模拟提交,如下:

我们就假装他作为我们要自动识别的目标。

一、分析网页 DOM 结构,载入验证码图片。

我们可以看到,验证码的 url 是:img/0.jpg。我这里的 url 会变化,是为了模拟更换验

  1. ctx1.drawImage(img,0,0,img.width,img.height); 

证码的过程。但实际上,由于验证码绝大多数为后台生成的,所以地址是固定的。那么我们很容易就可以拿到图片数据:new 一个 Image,赋值 url 即可(直接 get 到 img 元素也行)。参考代码:

  1. var img = document.getElementById("img"); 

二、将图片画到 canvas 上,拿到图片的像素数据。

要将图片画到 canvas 上,首先要创建一个 canvas 并初始化。参考代码:

  1. var canvas1 = document.createElement("canvas");  
  2. document.getElementsByTagName("body")[0].appendChild(canvas1);  
  3. canvas1.style.backgroundColor = "cornsilk"
  4.  var ctx1 = canvas1.getContext("2d"); 

随后,将图片绘制上去。参考代码:

  1. ctx1.drawImage(img,0,0,img.width,img.height); 

然后我们就可以利用 canvas,拿到图片的像素数据。参考代码:

  1. var imgData = ctx1.getImageData(0,0,WIDTH,HEIGHT); 

三、先后对图片进行二值化、腐蚀膨胀、切割、旋转、缩放处理。

这部分是图像识别的重点,直接影响到识别准确率和速度。复杂的验证码还应加上去躁等处理过程。比如可以检测贯穿的横线并消除,或者将颜色高度统一的背景去掉等等。我们的图片几乎没有干扰,只有简单的旋转和缩放,故直接进行二值化操作(二值化也能去掉少量的干扰)。

1、二值化操作的思路是:计算图片的平均灰度作为阈值,比阈值大的置为纯黑,反之纯白。参考代码:

  1. function toHex(fromImgData){//二值化图像  
  2.     var fromPixelData = fromImgData.data;  
  3.     var greyAve = 0 
  4.     for(var j=0;j<WIDTH*HEIGHT;j++){  
  5.         var r = fromPixelData[4*j];  
  6.         var g = fromPixelData[4*j+1];  
  7.         var b = fromPixelData[4*j+2];  
  8.         greyAve += r*0.3 + g*0.59 + b*0.11;  
  9.     }  
  10.     greyAve /= WIDTH*HEIGHT;//计算平均灰度值。  
  11.     for(j=0;j<WIDTH*HEIGHT;j++){  
  12.         r = fromPixelData[4*j];  
  13.         g = fromPixelData[4*j+1];  
  14.         b = fromPixelData[4*j+2];  
  15.         var grey = r*0.333 + g*0.333 + b*0.333;//取平均值。  
  16.         greygrey = grey>greyAve?255:0;  
  17.         fromPixelData[4*j] = grey;  
  18.         fromPixelData[4*j+1] = grey;  
  19.         fromPixelData[4*j+2] = grey;  
  20.     }  
  21.     return fromImgData;  
  22. }//二值化图像 

二值化后,效果如图:

可以发现,简单的背景色是可以去掉的。

二值化处理之后,就可以将图片转换成数组(存 0 或 1)来保存了。参考代码如下:

  1. function toXY(fromImgData){  
  2.     var result = new Array(HEIGHT);  
  3.     var fromPixelData = fromImgData.data;  
  4.     for(var j=0;j<HEIGHT;j++){  
  5.         result[j] = new Array(WIDTH);  
  6.         for(var k=0;k<WIDTH;k++){  
  7.             var r = fromPixelData[4*(j*WIDTH+k)];  
  8.             var g = fromPixelData[4*(j*WIDTH+k)+1];  
  9.             var b = fromPixelData[4*(j*WIDTH+k)+2];  
  10.             result[j][k] = (r+g+b)>500?0:1;//赋值0、1给内部数组  
  11.         }  
  12.     }  
  13.     return result;  
  14. }//图像转数组 

2、接下来是腐蚀、膨胀。腐蚀的基本思路在于,将所有白色周围的像素都置成白色,以此来消除游离的个别黑色像素点噪声。膨胀正好相反,将黑色周围置成黑色,消除数字内部的个别白色。同时,腐蚀、膨胀的操作可以让图片更加平滑。参考代码:

  1. function corrode(fromArray){  
  2.     for(var j=1;j<fromArray.length-1;j++){  
  3.         for(var k=1;k<fromArray[j].length-1;k++){  
  4.             if(fromArray[j][k]==1&&fromArray[j-1][k]+fromArray[j+1][k]+fromArray[j][k-1]+fromArray[j][k+1]==0){  
  5.                 fromArray[j][k] = 0;  
  6.             }  
  7.         }  
  8.     }  
  9.     return fromArray;  
  10. }//腐蚀(简单)  
  11. function expand(fromArray){  
  12.     for(var j=1;j<fromArray.length-1;j++){  
  13.         for(var k=1;k<fromArray[j].length-1;k++){  
  14.             if(fromArray[j][k]==0&&fromArray[j-1][k]+fromArray[j+1][k]+fromArray[j][k-1]+fromArray[j][k+1]==4){  
  15.                 fromArray[j][k] = 1;  
  16.             }  
  17.         }  
  18.     }  
  19.     return fromArray;  
  20. }//膨胀(简单) 

由于我们的图片背景干扰不是很强烈,所以基本看不出差别。不过对于计算机来说,还是有不同的哟~尤其是背景复杂的图片,这一步很好用。

3、切割。

由于我们的图片内各数字没有粘连,所以切割时只需要从上至下,从左至右扫描图片,发现图片某一竖行均为白色,就切一刀。有粘连的验证码比较困难,暂时不讨论了。参考代码:

  1. function split(fromArray,count){  
  2.     var numNow = 0 
  3.     var status = false 
  4.     var w = fromArray[0].length;  
  5.     for(var k=0;k<w;k++) {//遍历图像  
  6.         var sumUp = 0 
  7.         for (var j=0;j<fromArray.length;j++) //检测整列是否有图像  
  8.             sumUp += fromArray[j][k];  
  9.         if(sumUp == 0){//切割  
  10.             for (j=0;j<fromArray.length-1;j++)  
  11.                 fromArray[j].remove(k);  
  12.             w --;  
  13.             k --;  
  14.             status = false 
  15.             continue;  
  16.         }  
  17.         else{//切换状态  
  18.             if(!status)  
  19.                 numNow ++;  
  20.             status = true 
  21.         }  
  22.         if(numNow!=count){//不是想要的数字  
  23.             for (j=0;j<fromArray.length-1;j++)  
  24.                 fromArray[j].remove(k);  
  25.             w --;  
  26.             k --;  
  27.         }  
  28.     }  
  29.     return fromArray;  
  30. }//切割,获取特定数字 

切割后,左右的空白因为都被切了,就没有了。但是上下仍然存在空白,所以进行处理。这里比较简单,就不放代码了,思路和切割类似,但简单很多。

4、旋转、缩放。

其实旋转不是必要的。没有旋转的步骤,可以用更多的数据量训练来弥补。同理,缩放也不是必须的。先大致讲一下思路:旋转和缩放都再次利用了 canvas,将图片画上去之后,利用 canvas 的方法操作图片旋转或缩放,之后再把数据拿下来,就像我们最开始读图片时做的一样。旋转时,取顺时针逆时针各 90 度,取左右宽度最窄的角度,当作数字站立的旋转角度。缩放时,直接按预设长宽画图即可。这里我就只写了缩放。处理后再转换回数组形式。参考代码:

  1. function zoomToFit(fromArray){  
  2.     var imgD = fromXY(fromArray);  
  3.     var w = lastWidth 
  4.     var h = lastHeight 
  5.     var tempc1 = document.createElement("canvas");  
  6.     var tempc2 = document.createElement("canvas");  
  7.     tempc1.width = fromArray[0].length;  
  8.     tempc1.height = fromArray.length;  
  9.     tempc2.width = w;  
  10.     tempc2.height = h;  
  11.     var tempt1 = tempc1.getContext("2d");  
  12.     var tempt2 = tempc2.getContext("2d");  
  13.     tempt1.putImageData(imgD,0,0,0,0,tempc1.width,tempc1.height);  
  14.     tempt2.drawImage(tempc1,0,0,w,h);  
  15.     var returnImageD = tempt2.getImageData(0,0,WIDTH,HEIGHT);  
  16.     fromArray = toXY(returnImageD);  
  17.     fromArray.length = h;  
  18.     for(var i=0;i<h;i++)  
  19.         fromArray[i].length = w 
  20.     return fromArray;  
  21. }//尺寸归一化 

处理后效果如图:

四、记录处理后的单个数字的二值化数据,并人工录入真实数字。

到这里,图像处理就搞定了,后面的工作就比较简单了。我们把上一步得到的数组和真实的数字一起保存起来。这个过程可以有很多方法。我当时采取了大家一起录入的方式,所以搭建了 PHP+MySQL 的服务器,用数据库存储。这块就不详述了,大家各显神威。

五、重复训练

为了方便训练,我直接在页面里增加了手动输入的地方,提交后刷新验证码,继续提交。提交 20 个验证码(20*4=80 个数字)后,便经常可以正确识别出 4 位验证码,在单个数字的数据量在 300 左右时(大约需要 300/4=75 个验证码),识别效率已经在 95%以上。在 500 左右时已经基本见不到错误识别的情况了,这时候已经可以写代码实现自我训练了。此时识别一次大约需要 0.06 秒。

六、识别时,用处理后的图像与库中数据对比,取得最相近的数据,得到真实数字。

这块也比较简单。训练完成后,我将数据库数据导出,保存成了一个大的数组,直接用 js 就可以读了。识别时遍历所有的数据,按像素点逐一比较。由于尺寸做了归一化,所以直接数有多少像素匹配即可。匹配数量最多的即为识别出的结果。我只找到了最开始写的 PHP 代码,先放一下吧,有点懒得再写 js 了…:

  1. function check($str)  
  2.  
  3.     $str = str_split($str,1);  
  4.     $length = count($str);  
  5.     $tempNum = 0 
  6.     $tempSimmiar = 0 
  7.     $query = "SELECT * FROM numkeys" 
  8.     $sth = execSql($query);  
  9.     while ($RES = $sth->fetch()) {  
  10.         $thisSimmiar = 0 
  11.         $thisFeature = str_split($RES["feature"],1);  
  12.         $thisNum = $RES["resultnum"];  
  13.         for($i=0;$i<$length;$i++){  
  14.             if($thisFeature[$i]==$str[$i]){  
  15.                 $thisSimmiar ++;  
  16.             }  
  17.         }  
  18.         if($thisSimmiar>$tempSimmiar){  
  19.             $tempSimmiar = $thisSimmiar;  
  20.             $tempNum = $thisNum;  
  21.         }  
  22.     }  
  23.     return $tempNum;  

七、优化部分

这块就大家自己看着来吧,因为我的图片不是很复杂,数据量也不是很大(千条级别),所以也没啥优化的必要,每次识别大约 0.1 秒吧。所以我只是没事干,做了之前大纲里写了那两个优化。其实我感觉主要的优化方向还是图像处理那块,尽量减少干扰,才能提高效率,也能检测更复杂的验证码。

PS:训练和识别的接口:

训练:POST 发送 username(用户名)、password(密码)、n1(第一个数组)、n2、n3

、n4、num(真实四位字符)至 http://www.leonszone.cn/test/yanzhengma/train.php[3]。参考代码:

  1. function sendData() {  
  2.     var str = prompt("请输入验证码:", "");  
  3.     if(!str)  
  4.         return false;  
  5.     postData = {//整合数据包  
  6.         username: 'pdgzfx',  
  7.         password: 'pdgzfx',  
  8.         nums: str,  
  9.         n1: numsArray[0],  
  10.         n2: numsArray[1],  
  11.         n3: numsArray[2],  
  12.         n4: numsArray[3]  
  13.     };  
  14.     $.ajax({ 
  15.          url: 'http://www.leonszone.cn/test/yanzhengma/train.php',  
  16.         type: 'POST',  
  17.         data: postData,  
  18.         success: function (data) {  
  19.             console.log(data);  
  20.             setTimeout(function () {  
  21.                 location.reload();  
  22.             },1000);  
  23.         }  
  24.     });  

识别:POST 发送 username(用户名)、password(密码)、n1(第一个数组)、n2、n3、n4 至 http://www.leonszone.cn/test/yanzhengma/check.php[4]。参考代码:

  1. function getData() {  
  2.     postData = {//整合数据包  
  3.         username: 'pdgzfx',  
  4.         password: 'pdgzfx',  
  5.         nums: 'help!!!',  
  6.         n1: numsArray[0],  
  7.         n2: numsArray[1],  
  8.         n3: numsArray[2],  
  9.         n4: numsArray[3]  
  10.     };  
  11.     $.ajax({  
  12.         url: 'http://www.leonszone.cn/test/yanzhengma/check.php',  
  13.         type: 'POST', 
  14.         data: postData,  
  15.         success: function (data) {  
  16.             $("#Vercode").val(data);  
  17.             console.log(data);  
  18.         }  
  19.     });  

注册用户名密码(防止大家的库混淆):POST 或 GET 发送 username(用户名)、password(密码)至 http://www.leonszone.cn/test/yanzhengma/regist.php[5]。参考代码:

  1. function getData() {  
  2.     postData = {//整合数据包  
  3.         username: 'pdgzfx',  
  4.         password: 'pdgzfx',  
  5.         };  
  6.     $.ajax({  
  7.         url: 'http://www.leonszone.cn/test/yanzhengma/regist.php',  
  8.         type: 'POST',  
  9.         data: postData,  
  10.         success: function (data) {  
  11.             console.log(data); } }); } 

或直接浏览器访问:http://www.leonszone.cn/test/yanzhengma/regist.php\?username= 你的用户名 \&amp;amp;password=[6]你的密码

好累,先休息下,看看有没有人看吧…(我感觉应该没多少人= = 还真的有人!!!)

鸿蒙官方战略合作共建——HarmonyOS技术社区

【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

带你轻松入门 RabbitMQ

带你轻松入门 RabbitMQ

轻松入门RabbitMQ
共4章 | loong576

26人订阅学习

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

12人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

41人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微