GlidedSKY挑战之十:雪碧图1

叁歲伎倆 2022-01-25 14:38 229阅读 0赞

挑战网址:[http://glidedsky.com/level/crawler-sprite-image-1][http_glidedsky.com_level_crawler-sprite-image-1]

##### 题目介绍 #####

HTTP是基于TCP连接的，TCP连接的建立是需要时间和资源的。而下载网页所需的图片资源是通过HTTP的。如果有非常多的小图片，就需要建立很多TCP连接。勤劳勇敢的前端工作者们，想到把所有小图片放到一张图片里面去。这样就可以通过一次TCP链接，下载所有的小图片，再通过前端的奇技淫巧，来展示正确的图片。  
这种由很多小图片组成的图片，被称为雪碧图。雪碧图可以节约TCP连接的同时，也为爬取带来了难度。这里有一个网站，分了1000页，求所有数字的和。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA4Mzk4_size_16_color_FFFFFF_t_70]  
挑战难度:★★★★★★★☆☆☆  
看完题目介绍，很好，看起来很简单嘛

*  （脑力：先这样这样，在那样那样，应该就解决了，卧槽，我好聪明。）
 *  (眼睛：兴奋的冒金星)
 *  （手 ：办不到！）  
    我想这次题主发善心了？突然眼睛一瞥"奇技淫巧"，***发现事情应该没有那么简单***。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA4Mzk4_size_16_color_FFFFFF_t_70 1]果然不出我所料，打开原网页，发现标签里面啥也没有网页上却显示了数字，而每一个标签里面都有两个类属性，心想问题应该是是在类标签的css样式里面了（这他么不是废话吗）。  
    话不多说，先将全部的网页下下来，为啥这么做呢？
 *  以后自己写网页可以参考（心里想着是参考，其实就是直接贴上去）
 *  这个网站比较便宜，是不是崩溃，先把源码拿到手在本地可以随时处理
 *  如果最终的结果不对，对比几个网页就可以找到规律，并迅速找出出问题的数据  
    ![在这里插入图片描述][20190531110152217.png]

#### 任意打开一个源代码开始分析: ####

*  每一个标签中都有一个sprite类  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA4Mzk4_size_16_color_FFFFFF_t_70 2]\- 查看这个属性  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA4Mzk4_size_16_color_FFFFFF_t_70 3]可以看出这是一张base64的图，用base64.b64decode将字符串解析成图片发现是一张0-9的数字图，通过处理几页，发现都是0-1的数字，区别就是图片的大小和数字的放大缩小程度不一样而已。  
    ![在这里插入图片描述][20190531124327850.png]
 *  再看看另外一个类属性，发现是定位属性。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA4Mzk4_size_16_color_FFFFFF_t_70 4]到这里基本上知道怎么做了。  
    ![在这里插入图片描述][20190531110455412.png]
 *  先将图片拿到再将图片总宽度求出来除以10得到每个字符的平均大小以及范围，然后根据类属性进行匹配即可得到网页上看到的数字。

imgdata=base64.b64decode(tagString)  
            file=open(str(x) + '.jpg','wb')
            file.write(imgdata)  
            file.close()  
            im = Image.open(str(x) + '.jpg')
            imX,imY = im.size
            avg = imX/10
            # print(avg)
            xiabiao = dict(zip([x for x in range(0,10,1)],[avg/2 + x * avg for x in range(0,10,1)]))
            # print(xiabiao)

*  中间出现结果错误的情况，主要是有两次的得到的数据不太一样，经过调整最终得到了结果。

#### 搞定离场 ####

![在这里插入图片描述][20190531130314431.gif]

喜欢折腾代码的加群（群号:**822286811**）一起交流学习【python、VBA、Shell、Linux、dos、爬虫、拆机、装系统技术交流群】，点击链接加入群聊【计算机技术交流】：[https://jq.qq.com/?\_wv=1027&k=5V7RB2c][https_jq.qq.com_wv_1027_k_5V7RB2c]

[http_glidedsky.com_level_crawler-sprite-image-1]: http://glidedsky.com/level/crawler-sprite-image-1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA4Mzk4_size_16_color_FFFFFF_t_70]: /images/20220125/1fa7e57c67d4423c9b0dd58ea67be0b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA4Mzk4_size_16_color_FFFFFF_t_70 1]: /images/20220125/bf47f59e743f46028614938523e694f1.png
[20190531110152217.png]: /images/20220125/271169532d9d4ab2b9c63d44a91f1b1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA4Mzk4_size_16_color_FFFFFF_t_70 2]: /images/20220125/6b4202a0b5e84ee1a817ed40cc2972e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA4Mzk4_size_16_color_FFFFFF_t_70 3]: /images/20220125/43ab6d0f6a6644369ca51b628bb258d6.png
[20190531124327850.png]: /images/20220125/1a9ae71c02fd420a9019407a113387ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA4Mzk4_size_16_color_FFFFFF_t_70 4]: /images/20220125/e4eeb1819f9143718a0039e6f6234b99.png
[20190531110455412.png]: /images/20220125/e70aa44b8b1943a09346c2b4a278606e.png
[20190531130314431.gif]: /images/20220125/1c08ac8debea49acb935919ca0044d80.png
[https_jq.qq.com_wv_1027_k_5V7RB2c]: https://jq.qq.com/?_wv=1027&k=5V7RB2c