Selenium截屏 图片未加载的问题解决--【懒加载】

本文主要是介绍Selenium截屏 图片未加载的问题解决--【懒加载】，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

转载地址：https://www.cnblogs.com/liangmingshen/p/13794812.html

需求： 

截屏后转PDF。

问题：

selenium截屏后，图片未加载

原因：

网站使用了懒加载技术：只有在浏览器中纵向滚动条滚动到指定的位置时，页面的元素才会被动态加载。

什么是图片懒加载？

图片懒加载是一种网页优化技术。图片作为一种网络资源，在被请求时也与普通静态资源一样，将占用网络资源，而一次性将整个页面的所有图片加载完，将大大增加页面的首屏加载时间。

为了解决这种问题，通过前后端配合，使图片仅在浏览器当前视窗内出现时才加载该图片，达到减少首屏图片请求数的技术就被称为“图片懒加载”。

解决：

模拟人滚动滚动条的行为, 实现页面的加载

模拟人滚动滚动条的代码：

 1 js_height = "return document.body.clientHeight"
 2 driver.get(link)
 3 k = 1
 4 height = driver.execute_script(js_height)
 5 while True:
 6     if k * 500 < height:
 7         js_move = "window.scrollTo(0,{})".format(k * 500)
 8         print(js_move)
 9         driver.execute_script(js_move)
10         time.sleep(0.2)
11         height = driver.execute_script(js_height)
12         k += 1
13     else:
14         break

全部代码：

 1 #!/usr/bin/python3
 2 # -*- coding:utf-8 -*-
 3 """
 4 @author: lms
 5 @file: screenshot.py
 6 @time: 2020/10/10 13:02
 7 @desc:
 8 """
 9  
10 import time
11 from selenium import webdriver
12 from selenium.webdriver.chrome.options import Options
13 from PIL import Image
14  
15  
16 def screenshot_and_convert_to_pdf(link):
17     path = './'
18  
19     # 一定要使用无头模式，不然截不了全页面，只能截到你电脑的高度
20     chrome_options = Options()
21     chrome_options.add_argument('--headless')
22     chrome_options.add_argument('--disable-gpu')
23     chrome_options.add_argument('--no-sandbox')
24     driver = webdriver.Chrome(chrome_options=chrome_options)
25     try:
26         driver.implicitly_wait(20)
27         driver.get(link)
28  
29         # 模拟人滚动滚动条,处理图片懒加载问题
30         js_height = "return document.body.clientHeight"
31         driver.get(link)
32         k = 1
33         height = driver.execute_script(js_height)
34         while True:
35             if k * 500 < height:
36                 js_move = "window.scrollTo(0,{})".format(k * 500)
37                 print(js_move)
38                 driver.execute_script(js_move)
39                 time.sleep(0.2)
40                 height = driver.execute_script(js_height)
41                 k += 1
42             else:
43                 break
44  
45         time.sleep(1)
46         # 接下来是全屏的关键，用js获取页面的宽高
47         width = driver.execute_script("return document.documentElement.scrollWidth")
48         height = driver.execute_script("return document.documentElement.scrollHeight")
49         print(width, height)
50         # 将浏览器的宽高设置成刚刚获取的宽高
51         driver.set_window_size(width, height)
52         time.sleep(1)
53  
54         png_path = path + '/{}.png'.format('123456')
55         # pdf_url = SERVER_URL + '/static/global_tech_map/{}.pdf'.format(.pic_num)
56         # 截图并关掉浏览器
57         driver.save_screenshot(png_path)
58         driver.close()
59         # png转pdf
60         image1 = Image.open(png_path)
61         im1 = image1.convert('RGB')
62         pdf_path = png_path.replace('.png', '.pdf')
63         im1.save(pdf_path)
64  
65     except Exception as e:
66         print(e)
67  
68  
69 if __name__ == '__main__':
70     screenshot_and_convert_to_pdf('https://mp.weixin.qq.com/s/nJRnGpPVeJ1kdMIOwiPNpg')

这篇关于Selenium截屏 图片未加载的问题解决--【懒加载】的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！