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!