为了避免某某官方网站，本次记录同样也是 "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个，说明少了，根据下标来取值明显不对。那么我就把缺少的位置加到对应的位置，下标参数就对了。这里说明一下。如果位置参数在前面位置或中间位置缺少，必须要添加，如果在后面，不用添加。

思路总结：

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

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

def compile_set(sprite_set,img_width,i):"""找出缺少的部分并填补到set里面去:param sprite_set::param num_list::return:带正确序列的set()"""avg_img_x = img_width/10while i <= 10:if i < 1:img_x = 0else: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 += 1return sprite_set

end!

glidedsky挑战-图片式反爬（雪碧图）相关推荐

html css雪碧图,css sprite css雪碧图生成工具
什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...
css雪碧图动画,CSS3动画——雪碧图的实现
前言作为一个前端的初学者,现在好像已经在nodejs上越跑越偏,之前一直崇拜的CSS3和HTML5动画,如今也好久没有管.因为之前学了好多知识点,但是没有系统的进行总结,就从这篇文章开始,对一些碎片 ...
glidedsky挑战-滑块验证码反爬（腾讯防水墙滑块验证码）
相应页面(http://glidedsky.com/level/web/crawler-captcha-1) 题目要求: 先看看页面: 当我们一打开页面,就是出现滑块验证码页面,我们所要的数字参数是没 ...
雪碧图PHP,Css Sprite(雪碧图、精灵图) - SegmentFault 思否
一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...
【HTML+CSS】(2)CSS Sprite雪碧图
1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...
HTML中的“雪碧图“详解
HTML中的雪碧图详解 1.雪碧图的支持格式: 每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片. 2.雪碧图的优点: (1)可以减小建立连接的消耗,加快运行. (2)多张 ...
在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
雪碧图 css 使用方式与 Js使用方式
效果链接示例雪碧图如下,雪碧图图片资源来源于力扣官网中头像悬浮Dark Side功能. 雪碧图分析:该雪碧图横向为12等分,高度32px 1. JavaScript方式使用雪碧图(猜测力扣使用的方式 ...
CSS 网站小图标雪碧图
https://www.jianshu.com/p/7482dde882af 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题:目前小图标显示常见有两种方式(其他方式欢迎补充):1. ...

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