到这里
我们的第一个思路就是
下载这两张原始图片
然后通过偏移量合成两张真正的图片
背景图
↓变身
缺口图
↓变身
那么怎么做呢?
因为我们还要模拟滑动滑块
所以呢
我们要用到 selenium
打开b站的登录页
然后等到那个滑块显示出来
获取滑块按钮
driver.get(url)
slider = WAIT.until(EC.element_to_be_clickable(
(By.CSS_SELECTOR, “#gc-box > div > div.gt_slider > div.gt_slider_knob.gt_show”)))
接下来我们就获取页面的源码
driver.page_source
然后使用 bs 获取两张原始背景图片的 url
bs = BeautifulSoup(driver.page_source,‘lxml’)
找到背景图片和缺口图片的div
bg_div = bs.find_all(class_=‘gt_cut_bg_slice’)
fullbg_div = bs.find_all(class_=‘gt_cut_fullbg_slice’)
获取缺口背景图片url
bg_url = re.findall(‘background-image:\surl(“(.*?)”)’,bg_div[0].get(‘style’))
获取背景图片url
fullbg_url = re.findall(‘background-image:\surl(“(.*?)”)’,fullbg_div[0].get(‘style’))
拿到了图片地址之后
将图片下载下来
将图片格式存为 jpg 格式
bg_url = bg_url[0].replace(‘webp’, ‘jpg’)
fullbg_url = fullbg_url[0].replace(‘webp’, ‘jpg’)
print(bg_url)
print(fullbg_url)
下载图片
bg_image = requests.get(bg_url).content
fullbg_image = requests.get(fullbg_url).content
print(‘完成图片下载’)
ok
我们已经把两张原始图片下载下来了
那么接下来就是要合成图片了
我们要根据图片的位置来合成
也就是源码中的 background-position
获取每一个小图片的位置
我们可以通过字典的形式来表示这些位置
然后将数据放到列表中
存放每个合成缺口背景图片的位置
bg_location_list = []
存放每个合成背景图片的位置
fullbg_location_list = []
for bg in bg_div:
location = {}
location[‘x’] = int(re.findall(‘background-position:\s(.?)px\s(.?)px;’, bg.get(‘style’))[0][0])
location[‘y’] = int(re.findall(‘background-position:\s(.?)px\s(.?)px;’, bg.get(‘style’))[0][1])
bg_location_list.append(location)
for fullbg in fullbg_div:
location = {}
location[‘x’] = int(re.findall(‘background-position:\s(.?)px\s(.?)px;’, fullbg.get(‘style’))[0][0])
location[‘y’] = int(re.findall(‘background-position:\s(.?)px\s(.?)px;’, fullbg.get(‘style’))[0][1])
fullbg_location_list.append(location)
那么
现在我们已经有了原始图片
还知道了每个位置应该显示原始图片的什么部分
接下来我们就写一个方法
用来合成图片
写入图片
bg_image_file = BytesIO(bg_image)
fullbg_image_file = BytesIO(fullbg_image)
合成图片
bg_Image = mergy_Image(bg_image_file, bg_location_list)
fullbg_Image = mergy_Image(fullbg_image_file, fullbg_location_list)
那么问题又来了
怎么合成啊
我们再看看一开始分析的图片
这里图片被分割成的每一个小图片的尺寸是
10 * 58
所以我们也要将我们刚刚下载的原始图片切割成相应的尺寸大小
而且
这张图片是由上半部分的小图片和下半部分的小图片合成的
所以我们定义两个 list 来装这些小图片
存放上下部分的各个小块
upper_half_list = []
down_half_list = []
然后将原始的图片切割好放进去
image = Image.open(image_file)
通过 y 的位置来判断是上半部分还是下半部分,然后切割
for location in location_list:
if location[‘y’] == -58:
间距为10,y:58-116
im = image.crop((abs(location[‘x’]), 58, abs(location[‘x’])+10, 116))
upper_half_list.append(im)
if location[‘y’] == 0:
间距为10,y:0-58
im = image.crop((abs(location[‘x’]), 0, abs(location[‘x’]) + 10, 58))
down_half_list.append(im)
至此
我们这两个 list 就分别放好了各个切割的图片了
那么接下来就创建一张空白的图片
然后将小图片一张一张(间距为10)的粘贴到空白图片里
这样我们就可以得到一张合成好的图片了
哎
我真是个天才
创建一张大小一样的图片
new_image = Image.new(‘RGB’, (260, 116))
粘贴好上半部分 y坐标是从上到下(0-116)
offset = 0
for im in upper_half_list:
new_image.paste(im, (offset, 0))
offset += 10
粘贴好下半部分
offset = 0
for im in down_half_list:
new_image.paste(im, (offset, 58))
offset += 10
那么到现在
我们可以得到网页上显示的那两张图片了
一张完全的图片
一张带缺口的图片
接下来我们就要通过对比这两张图
看看我们要滑动的距离是多远
合成图片
bg_Image = mergy_Image(bg_image_file, bg_location_list)
fullbg_Image = mergy_Image(fullbg_image_file, fullbg_location_list)
bg_Image.show()
fullbg_Image.show()
计算缺口偏移距离
distance = get_distance(bg_Image, fullbg_Image)
print(‘得到距离:%s’ % str(distance))
可以通过图片的 RGB 来计算
我们设定一个阈值
如果 r、g、b 大于这个阈值
我们就返回距离
def get_distance(bg_Image, fullbg_Image):
#阈值
threshold = 200
print(bg_Image.size[0])
print(bg_Image.size[1])
for i in range(60, bg_Image.size[0]):
for j in range(bg_Image.size[1]):
bg_pix = bg_Image.getpixel((i, j))
fullbg_pix = fullbg_Image.getpixel((i, j))
r = abs(bg_pix[0] - fullbg_pix[0])
g = abs(bg_pix[1] - fullbg_pix[1])
b = abs(bg_pix[2] - fullbg_pix[2])
if r + g + b > threshold:
return i
现在
我们知道了关键的滑动距离了
激动人心的时刻到了
我们使用 selenium
拿到滑块的元素
然后根据这个距离拖动到缺口位置不就好了么
马上打开 selenium 的文档
看到了这个函数
它可以使用左键点击元素
然后拖动到指定距离
最后释放鼠标左键
挖槽
正合我意
赶紧试一下
knob = WAIT.until(EC.presence_of_element_located((By.CSS_SELECTOR, “#gc-box > div > div.gt_slider > div.gt_slider_knob.gt_show”)))
ActionChains(driver).drag_and_drop_by_offset(knob, distance, 0).perform()
运行一下试试看吧
哇哦你妹哦~
妖怪吃了拼图了
看来直接拖拽是不行的
容易遇到妖怪
毕竟这太快了
就算加藤鹰也没那么快吧
我试着拖完滑块让它睡一下再释放
ActionChains(driver).click_and_hold(knob).perform()
ActionChains(driver).move_by_offset(xoffset=distance, yoffset=0.1).perform()
time.sleep(0.5)
ActionChains(driver).release(knob).perform()
发现拼图还是特么的被妖怪吃了
后来发现原来别人也遇到了这样的问题
然后又发现了
现在能在网上找到很多很多的学习资源,有免费的也有收费的,当我拿到1套比较全的学习资源之前,我并没着急去看第1节,我而是去审视这套资源是否值得学习,有时候也会去问一些学长的意见,如果可以之后,我会对这套学习资源做1个学习计划,我的学习计划主要包括规划图和学习进度表。
分享给大家这份我薅到的免费视频资料,质量还不错,大家可以跟着学习
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!