NO.001-特殊滑块验证码解决方案——By.杭州组

作者：亚述、启航

关键词：滑块验证、canvas元素

一、问题背景

    某些网站（本案例中的网址为：https://passport.geely.com/frontend/login#/geelyLogin）在登录时的滑块验证码会出现无法捕获精确的目标图块元素的问题（如图1所示），原因是这个验证码的背景图和目标图块都同为canvas元素，且两个元素的宽(width)和高(height)都相等（如图2所示），因为目标图块有一层透明图层（如图3所示），就导致影刀自定义指令中的"滑动拼图验证"指令无法使用。

二、解决思路

    在本案例中的关键流程全部包含在一个无限循环内，如果滑动成功(即验证码的拖拽滑块图像消失)则退出循环，否则就点击刷新图像然后进行下一次识别与滑动操作。

关键流程如下

1. 将验证码背景图这个canvas元素生成图片下载保存到本地；
   （注：这里是"执行JS脚本"指令配合"处理下载对话框"指令使用的，JS代码及注释说明如下所示）
   
2. 使用"验证码识别"指令（类型：单缺口滑块(返回X坐标轴)）识别下载的canvas图片，返回背景图中的缺口在X轴上的距离值，也就是我们想要的'要滑动的距离'；
3. 获取推拽滑块的原本位置x和y，然后将其移动到目标位置。

    注：目标位置X坐标为 原本位置的x+要移动的距离(±任意值)，目标位置Y坐标就是原本位置的y。其中由于不同电脑的分辨率也不同，目标位置X坐标的末尾可根据具体情况加减任意值，这里需要编写应用时多加测试才能减少偏移量使得效果更好，如本案例中的目标位置需要在末尾-5才可使结果更精确（如图4所示）。

三、应用实现

针对本案例所编写的应用及具体说明如图5、图6所示：

四、效果展示