拼图滑块底图还原

声明

本文章中所有内容仅供学习交流使用，不用于其他任何目的，不提供完整代码，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！文章未经许可，禁止转载，如有侵权，请联系站长删除！

前言

早期学习爬虫的时候，对于拼图滑块这一块特别感兴趣，特别是文字点选，某宝的无感滑块。可是，底子不够，所学知识不多，这些反爬虫措施对于当时的我来说，望而止步，想都不敢想。

后来，随着学习的越发深入，对于这些也有了基本概念，知道了原理，就不再是盲人摸象，碰巧照猫画虎弄了个博客，就出几篇和滑块校验相关的文章，以此增加对这些方面的理解。

逆向目标

网站：aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1wb3B1cC5odG1s

流程分析

点击按钮就能触发验证，可以看到校验图片是完好无损的，右键打开控制台，刷新一次，可以看到，图片是乱序。

既然后端发的是乱序的校验图片，但呈现在用户面前的又是正常的图片，那么前端某个地方一定做了还原手段。

找到事件监听器，选中画布，刷新验证，就能成功触发断点。

其实这里就能明显看到，地图还原的算法操作

部分固定参数值：

Ut = [
39, 38, 48, 49, 41, 40, 46, 47, 35, 34, 50, 51, 33, 32, 28, 29, 27, 26, 36, 37,
31, 30, 44, 45, 43, 42, 12, 13, 23, 22, 14, 15, 21, 20, 8, 9, 25, 24, 6, 7, 3, 2,
0, 1, 11, 10, 4, 5, 19, 18, 16, 17
]

r = 160

废话不多说，Python 算法还原

def reconstruct_image(Ut, r):
    a = r / 2
    new_image = Image.new('RGB', (260, r), (255, 255, 255))  # 创建新图片，白底

    for _ in range(52):
        c = Ut[_] % 26 * 12 + 1
        u = a if 25 < Ut[_] else 0

        # 从乱图中扣下小图块
        print(c, u, c + 10, u + a)
        cropped_tile = original_image.crop((c, u, c + 10, u + a))

        # 计算新图片中的位置
        x_position = _ % 26 * 10
        y_position = a if 25 < _ else 0
        print(x_position, y_position)
        # input()

        # 在新图片中拼接小图块
        new_image.paste(cropped_tile, (int(x_position), int(y_position)))

    return new_image

结果验证

熟能生巧，只要有思路，就有成功的可能！

Study hard and make progress every day