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

时间:2022-06-10 01:44:32

需求:

截屏后转PDF。

问题:

selenium截屏后,图片未加载

如下图:

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

原因:

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

什么是图片懒加载?

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

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

解决:

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

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

        js_height = "return document.body.clientHeight"
driver.get(link)
k = 1
height = driver.execute_script(js_height)
while True:
if k * 500 < height:
js_move = "window.scrollTo(0,{})".format(k * 500)
print(js_move)
driver.execute_script(js_move)
time.sleep(0.2)
height = driver.execute_script(js_height)
k += 1
else:
break

  

全部代码:

#!/usr/bin/python3
# -*- coding:utf-8 -*-
"""
@author: lms
@file: screenshot.py
@time: 2020/10/10 13:02
@desc:
""" import time
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from PIL import Image def screenshot_and_convert_to_pdf(link):
path = './' # 一定要使用无头模式,不然截不了全页面,只能截到你电脑的高度
chrome_options = Options()
chrome_options.add_argument('--headless')
chrome_options.add_argument('--disable-gpu')
chrome_options.add_argument('--no-sandbox')
driver = webdriver.Chrome(chrome_options=chrome_options)
try:
driver.implicitly_wait(20)
driver.get(link) # 模拟人滚动滚动条,处理图片懒加载问题
js_height = "return document.body.clientHeight"
driver.get(link)
k = 1
height = driver.execute_script(js_height)
while True:
if k * 500 < height:
js_move = "window.scrollTo(0,{})".format(k * 500)
print(js_move)
driver.execute_script(js_move)
time.sleep(0.2)
height = driver.execute_script(js_height)
k += 1
else:
break time.sleep(1)
# 接下来是全屏的关键,用js获取页面的宽高
width = driver.execute_script("return document.documentElement.scrollWidth")
height = driver.execute_script("return document.documentElement.scrollHeight")
print(width, height)
# 将浏览器的宽高设置成刚刚获取的宽高
driver.set_window_size(width, height)
time.sleep(1) png_path = path + '/{}.png'.format('123456')
# pdf_url = SERVER_URL + '/static/global_tech_map/{}.pdf'.format(.pic_num)
# 截图并关掉浏览器
driver.save_screenshot(png_path)
driver.close()
# png转pdf
image1 = Image.open(png_path)
im1 = image1.convert('RGB')
pdf_path = png_path.replace('.png', '.pdf')
im1.save(pdf_path) except Exception as e:
print(e) if __name__ == '__main__':
screenshot_and_convert_to_pdf('https://mp.weixin.qq.com/s/nJRnGpPVeJ1kdMIOwiPNpg')

  

处理完成后的截屏:

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

感谢阅读~

Selenium截屏 图片未加载的问题解决--【懒加载】的更多相关文章

  1. IOS第17天&lpar;2&comma;Quartz2D图片剪裁变圆行图,和截屏图片)

    **** #import "HMViewController.h" #import "UIImage+Tool.h" @interface HMViewCont ...

  2. 使用 vant 的 v-lazy 实现图片 vue 在移动端的懒加载

    官方文档:https://youzan.github.io/vant/#/zh-CN/lazyload 引入 Lazyload 是 Vue 指令,使用前需要对指令进行注册 import Vue fro ...

  3. vue 中监测滚动条加载数据(懒加载数据)

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  4. js 利用canvas &plus; flv&period;js实现视频流 截屏 、本地下载功能实现,兼容火狐,谷歌;canvas截屏跨域问题,无音频视频流加载不显示问题

    项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...

  5. vue中使用html2canvas及解决html2canvas截屏图片模糊问题

    最近在项目中用到了html2canvas插件,遇到的一些坑写下来,与大家共勉. html2canvas  官方网站http://html2canvas.hertzen.com/index.html 这 ...

  6. 完美解决scrollView 截屏图片模糊

    UIGraphicsBeginImageContext   首先说明一下UIGraphicsBeginImageContextWithOptions 和UIGraphicsBeginImageCont ...

  7. js实现图片(高度不确定)懒加载

    最近一直在弄广告页,由于广告页几乎都是图片拼凑起来的,为了减少服务器压力和带宽,采用图片懒加载方式,但是我们的图片高度又不确定,所以我在网上下载了echo.js自己改了一下. 大体思路是:让首页先加载 ...

  8. 图片利用 new Image&lpar;&rpar;预加载原理 和懒加载的实现原理

    二:预加载和懒加载的区别 预加载与懒加载,我们经常经常用到,这些技术不仅仅限于图片加载,我们今天讨论的是图片加载: 图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片.当用户需要查看 ...

  9. pytest框架优化——将异常截屏图片加入到allure报告中

    痛点分析: 在做allure定制化的时候,关于附件添加这一块,我们在代码里可以添加我们准备好的附件,这里用图片,通过下面的方法就能实现 allure.attach(file, '图片描述', allu ...

随机推荐

  1. Hibernate 注解的用法以及说明&lpar;二&rpar;

    注解映射必须满足两大条件:Hibernate3.2以上版本和JSEE 5. @Entity 类注释,所有要持久化的类都要有@Entity   public class Org  implements ...

  2. 转&colon;在支持ARC工程中编译不支持ARC的文件

    转:http://blog.csdn.net/duxinfeng2010/article/details/8709697 实践总结:-fno-objc-arc 设置 解决了 旧代码中存在 releas ...

  3. FL2440驱动添加(3)LCD驱动添加学习笔记

    FL2440 LCD内置控制器,320*240 TFT型LCD. 自我理解总结的两种添加驱动模式: 非platform方式添加驱动: 加载驱动: 1,硬件初始化,申请内存,并作地址映射 2,分配设备号 ...

  4. shell 使用for循环 启动后台任务

    为了统计多天的数据并按照天为文件名输出,写了脚本,脚本可以统计单天的数据.为了实现多天的同时进行采用 启动多个进程后台执行形式: 但是直接 执行的参数后面加上& 并不能解决,采用 echo & ...

  5. 着色器&lpar;Shader&rpar;

    着色器(Shader) 顶点着色器(Vertex shader) 片段着色器(Fragment shader) 几何着色器(Geometry Shader) 提供通用计算能力的着色器(Compute ...

  6. HDU 4081 Qin Shi Huang&&num;39&semi;s National Road System

    步骤是先求最小生成树,然后选两个不同的点,遍历所有的这样的点,选出两点人口比较大,而且连通两点的边的最大边比较大的情况. 因此要对i,j点连接起来的边进行遍历. #include<stdio.h ...

  7. python3 Flask -day1

    window 10  python 3 安装flask 首先打开cmd命令执行窗口切换到Python安装目录的Script,输入pip出现以下页面 这里我们使用virtualenv虚拟开发环境 为什么 ...

  8. Java-redis-雪崩优化

    缓存失效的时候如下图: 解决办法"使用互斥锁(mutex key):下面是核心伪代码 v = memcache.get(key); if (v == null) { if (memcache ...

  9. C&plus;&plus;常见的概念

    1)多态:允许将子类类型的指针赋值给父类类型的指针.赋值以后,父类对象可以根据当前赋值给它的子类对象的特性以不同的方式运作. 2)深拷贝:重新分配内存:浅拷贝:共用同一内存. 3)友元:非成员函数不能 ...

  10. ubuntu物理机上搭建Kubernetes集群 -- 准备

    准备工作 1.kubernetes架构 2.三台ubuntu主机: 操作系统:ubuntu-16.04.1-server-amd64 docker: 1.安装 使用命令 sudo apt-get in ...