虎嗅网注册
这次我们是拿虎嗅开刀，注册账号的时候需要滑动图片到缺口位置，这种验证码我们现在也经常遇到，这个就不用详细介绍了吧
图1
针对这种验证码我们首先确定了使用selenium模拟滑动破解方式，selenium鼠标移动点击拖动都比较简单，那么问题就在于拖动多少距离，眼睛看起来很直观，但是程序怎么获取呢？利用图像识别......，额，这个只能想想了吧。不如看看网页源码或者请求信息，看看有没有有效的信息。
查看网页信息
鼠标右键点击到图片上，查看元素
图2
这一瞬间的图片，还好我二十几年的麒麟臂没白练，我们看看元素查看到的都是什么东西
图3
这看起来有点奇怪哦，有个图片链接，还有位置信息，而且还那么多，先把图片链接拷贝到浏览器里访问下看看
图4
WF，这是什么鬼？注意到那个像猪尾巴一样的6了吗？还有那个小箭头，跟上面完整图片对比一下，发现把箭头挪动到小6旁边，猪尾巴就成功了。当然你仔细观察的话，还有其他的比如文字也是类似。那么我们可以确认这张图片应该是被打乱的，如果我们可以把它拼起来，是不是就离计算缺口位置比较近了。现在我们应该要注意到元素查看里后面的位置信息了，那么多，看起来应该跟这个打乱顺序有点关系吧。我们来确认一下。我的想法是这样子的，既然这个位置和拼图有关，而且再看我们上面麒麟臂截的图，我再标记一下
图5
我们点击查看元素的时候，浏览器会帮我们突出显示一下，本来我是在图片上点击查看的，按照我的想法，它不是应该整张图片突出显示一下吗？看起来好像不是这么回事，只有那么一小部分，而且上面还有元素信息，宽高类名，再回去看看图3，位置坐标里，前面应该是x轴，后面是y轴，y轴只有58和0，再根据图2一看，图片分为上下两部分，再数一下div的数量，26块，每一块宽10x高58。按照这个来算的话，那么整个图片的宽就是260，高116，用截图工具去拉一下图片的宽高，基本吻合
图6
接下来就是确定怎么拼了。这里很抱歉的告诉大家，猪没了，等我写到这里再去查看网页的时候，图片已经刷新了。所以接下来的截图可能不一样，在这里提前跟大家说明一下。反正就是找特征点嘛，每个图片应该都有的。先随便找一个特征点，查看元素，看它定位到那个div元素那里，然后再看看后面的位置。基本就是这样，所以我们找图片既然和位置有关，那么我们最好选一些位置明显的地方，比如中间，或者两边。
图7
这个差不多算中间位置了吧，查那么一点点无所谓了
图8
我去，这......跟我想的不太一样呀，再找两张看看，代表性及其强烈的
图9
图10
图11
图12
为了防止有人说我水字数，另外两个角就不截图了。到这一步可能有人纳闷了，为啥？你刚才说图片宽度260，为什么坐标里出现了289这样的坐标，这不就是超标了吗？一开始我也有这样的疑惑，可能我们看到图片比实际的小，也许人家在图片外面还留了边框呢，我一开始是这么想的。但是这个坐标是前面url里面的图片坐标，然后我就去看了一下图4
图13
这个图片尽然比较大，坐标问题有答案了，但是这个跟260有什么关系呢？打乱的图片比较大，拼好的小，那它是怎么拼的呢？幸好我们看到了一个比较有用信息
看到这个-1px了吗？它成功引起了我的注意，因为按照我的想法，如果是从拼图里拿出一部分拼成一个完成图片的话，那么最左边拿出来的图片，应该是从(0,0)，(0,58)，但是我们看到的是(1,0)，(1,58)，y值还是比较符合我们的预期的，第一部分从0开始，高58，第二部分从58开始。但是x值有点问题，按照1作为起点，那第二个应该是11，因为宽度是10，这是确定的，我们找找看
是13，难道每一小块前面都多余了1个像素？按照这种的话也应该是12呀，按照这种方式我们继续找一找剩下的，通过分析我们发现每个小块+12作为下一个小块的起点。这样的话左右各去掉一个像素，宽度不就是10了吗？而且每个小块是12，26个是312，跟我们看到的拼图大小差不多，说明我们分析的是正确的。按照元素里提供的坐标，取宽度为10的大小即可。接下来分析一下这些坐标的意义。
上文内容不用于商业目的，如涉及知识产权问题，请权利人联系博为峰小编(021-64471599-8017)，我们将立即处理。
