glidedsky挑战-图片式反爬（雪碧图）

为了避免某某官方网站，本次记录同样也是 "glidedsky" 网站中的反爬虫题目，只要明白，其它网站理论都差不一样。

相关网站：http://glidedsky.com/level/web/crawler-sprite-image-1

网站截图：

打开页面是这样的

页面h5参数是这样的

简单看了一下页面，请求没有我们想要的数字，只有一些 xxxx sprite 的元素。

百度一下 sprite 于是找到一个合理的解释：雪碧图

附：雪碧图解释 （https://www.cnblogs.com/evenyao/p/9262371.html）

说到底就是一张图的映射。

于是开始找图片来源：

又是base64编码的图片信息，那么解码保存到本地看看到底是什么。

都是一些0-9的图片。

再再原页面中的到底是什么映射的。

样式中，找到这么一个x偏移量。这个不用猜肯定是数据的偏移量。

那么问题来了，怎么通过偏移量找到对应的数字，找到数字但它是图片，又怎么变成可以运算的阿拉伯数字呢？

最开始就想到用图像识别，但是太麻烦了。

过程：

以下是我后来想到的：

把图片保存下来，获取图片的宽，再计算平均值，把图片位置模拟出来，使用字典使之对应，如图片宽为100，则平均值为100/10=10。那么图片中0-10显示的是0，11-20显示的是1.。。。。

那么只要background-position-x 的在那个区间内，就是那个数字。

可现实并是不我想的那样。数据顺序虽然规定，但是大小不一，偏移量会出来误差，容易出错。

最后想到的是，它既然位置不一，那么我索性把页面中所有值取出来，通过set过滤，顺序。如果它有10个不一样的位置，说明位置数据下标就是对应的对应的数字。如果位置参数小于10个，说明少了，根据下标来取值明显不对。那么我就把缺少的位置加到对应的位置，下标参数就对了。这里说明一下。如果位置参数在前面位置或中间位置缺少，必须要添加，如果在后面，不用添加。

思路总结：

1. 获取图片参数，通过base64解码，保存到图片文件中
2. 获取页面中的偏移量，进行排序，过滤。
3. 获取图片的宽度，得到平均值，用于填补空缺位。
4. 通过偏移量，找到对应下标，并整合出对应的数字。 

还是那句话：应于网站要求，这里只说思路和提供部分代码。

def compile_set(sprite_set,img_width,i):
    """
    找出缺少的部分并填补到set里面去
    :param sprite_set:
    :param num_list:
    :return:带正确序列的set()
    """
    avg_img_x = img_width/10

    while i <= 10:

        if i < 1:
            img_x = 0
        else:
            img_x = sprite_set[i] - sprite_set[i-1]

        if img_x > avg_img_x*1.5:

            sprite_set.insert(i, int(sprite_set[i-1]+avg_img_x))

            compile_set(sprite_set,img_width,i+1)
        i += 1

    return sprite_set
           

end!