js 移动端 滑块验证码插件_滑块验证码缺口识别技术分享02

上一篇滑块验证码缺口识别技术分享01介绍了寻找滑块缺口的思路，不过需要先手动提取滑块缺口周围的RGB值，有些麻烦且不够通用。本片将基于上一篇文章的思路作出改进，做到自动识别缺口位置且通用

识别步骤

1. 图片灰度化

因为我们只识别缺口，不用考虑色彩，所以最先想到的是将彩色图片转为灰度图片，降低识别的复杂度，代码及效果如下：

2. 锐化边缘

将上面灰度背景锐化，目的是更方便的寻找轮廓

锐化后我们会得到个二维数组，图中黑色区域点对应的值为0，白色的点对应的值为255。

3. 制作滤波矩阵-卷积核

什么是卷积核？回顾滑块验证码缺口识别技术分享01的分享，下图中间移动的3*3的矩阵我们称其为卷积核。

3.1 卷积核作用

此处是为了框选我们想定位的区域，为了更好的理解，我们举出如下例子：

问题：假如有如下矩阵，我们暂且称作目标矩阵，如果我们想寻找点数为1的最多的位置，怎么寻找呢？

[
    [0, 0, 0, 0, 0, 0, 0],
    [0, 0, 1, 1, 1, 0, 0],
    [0, 0, 1, 1, 1, 0, 0],
    [0, 0, 1, 1, 1, 0, 0],
    [0, 0, 0, 0, 0, 0, 0]
]

做法：

1. 制作一个模版，即卷积核，如下：
   [ [1, 1, 1], [1, 1, 1], [1, 1, 1] ]
2. 以模版矩阵[1,1]的位置为中心点，在目标矩阵中的左上角开始移动至右下角，然后将被该模版覆盖的矩阵区域与该模版矩阵对应点相乘，然后取乘积之和作为目标矩阵被覆盖区域中心点的值。运算过程及结果如下：

[[0 1 2 3 2 1 0] [0 2 4 6 4 2 0] [0 3 6 9 6 3 0] [0 2 4 6 4 2 0] [0 1 2 3 2 1 0]]

1. 观察上面计算后的结果即可看出值为9的点即为我们要寻找的点数为1的最多的位置。因为值为9的点，目标矩阵被覆盖区域必须为
   [ [1, 1, 1], [1, 1, 1], [1, 1, 1] ]
   这样卷积运算后值才为9

3.2 制作缺口的卷积核

因为缺口的形状和小滑块是完全吻合的，因此我们基于小滑块来制作

3.2.1 裁剪

观察小滑块，是有透明区域的，我们需要将其裁剪掉，裁剪代码及效果如下：

3.2.2 锐化边缘

参考 2.锐化边缘，将裁剪后的小滑块锐化，结果如下：

3. 2D卷积

现在我们有了目标矩阵（背景图）及 卷积核（小滑块），下面可以做2D卷积了。计算过程参考 3.1 卷积核作用

目标矩阵（背景图）：

卷积核（小滑块）：

python计算2D卷积时有现成的库，不用手写了，代码如下：

经过这一步，我们会得到类似 3.1 卷积核作用 示例运算后的结果。

4. 取卷积结果最大的点

再次理解下下面这俩图

目标矩阵（背景图）：

卷积核（小滑块）：

图中白色区域为255，黑色区域为0. 那么做完卷积运算后，卷积结果最大的点所在区域即为与卷积核（小滑块）边缘重合度最高的区域。那么在背景图中，与小滑块重合度最高的区域应该为缺口区域。因此我们找到的卷积结果最大的点就是背景图缺口的中心点。

寻找最大点的代码如下：

总结

在做2D卷积时，有个细节一定要注意，即在做卷积之前 卷积核的矩阵要逆时针旋转180度

直接做卷积

卷积核的矩阵时针旋转180度后做卷积

至于为什么旋转180，这个我没理解明白，卷积就是这么定义的。如果有大神理解明白了，欢迎留言交流。

另外cv2有个模版匹配的函数，我们处理好小滑块及背景图后，也可以使用cv2的模版匹配功能去寻找缺口位置，有兴趣的同学可以试试。

了解更多

欢迎加入知识星球 https://t.zsxq.com/eEmAeae

本星球专注于爬虫技术分享，通过一些案例详细讲解爬虫中遇到的问题以及解决手段。涉及的知识包括但不限于 爬虫框架刨析、js逆向、中间人、自动化、Android 逆向！期待您的加入，和我们一起探讨爬虫技术，拓展爬虫思维！

现星球搞推广活动，发放优惠圈30张，先到先得哦，抢完即止