如何编写示例代码实现JavaScript逆向滑动验证码图片还原？

本文共计724个文字，预计阅读时间需要3分钟。

原文：本文列举两个例子：某物体和某实验的滑动验证+一、某实验：+aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s+未还原图像：+原图后的图：+从服务端请求来的图片是打乱后的，给用户看的时候是完的

改写后：本文以两个案例说明：某物体与某实验的滑动验证。一、某实验示例：+链接：+原始图像未显示，后续图像为：+服务端返回的图片经过打乱，用户看到的是整理后的完整图像。

本文列举两个例子：某象和某验的滑动验证

一、某验：aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s

未还原图像:

还原后的图:

从服务端请求来的图片是打乱后的，给用户看的时候是完整的，这个过程肯定是运行了某段js代码，将打乱的图片进行还原操作。所以我们需要找到这段js，然后还原它的代码逻辑，实现图片的还原操作，找到缺口距离，实现滑动操作。

如果你仔细观察的话，你会发现还原后的图它是canvas生成出来的

那你应该会想到，那段js中会生成canvas，然后使用它下面的一些方法，实现图片的还原操作，所以我们需要知道他啥时候生成canvas，找到位置，然后慢慢往下调试，找到还原代码。

这时我们就需要使用油猴插件，进行hook了。