需求:

截屏后转PDF。

问题:

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截屏 图片未加载的问题解决--【懒加载】的更多相关文章

  1. IOS第17天(2,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 + flv.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()预加载原理 和懒加载的实现原理

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

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

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

随机推荐

  1. 安装Android Studio之后无法直接打开SDK Manager

    之前安装的android studio之后,SDK Manager和AVD Manager两个运行程序双击都打不开页面了,之前都是正常的,所以java环境变量的问题是不存在的. SDK Manager ...

  2. 【原】“Error getting 'android:label' attribute”

    项目上线过程中遇到“Error getting 'android:label' attribute: attribute is not a string value”这个错误. 备忘下:是因为有act ...

  3. es6使用箭头函数需要注意的问题

    this问题 箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域,谁定义的函数,this指向谁 箭头函数要实现类似纯函数的效果,必须剔除外部状态.所以箭头函数不具备普通函数里常见的 ...

  4. C# aspx 禁止文本款输入缓的几种方法

    1   在ASP.NET中可以在页面中加入以下内容: <%@ OutputCache Location="None" VaryByParam="None" ...

  5. 测试JsonAnalyzer解析Json的十一个测试用例

    目测以下测试用例都是通过的. 01. 原文={"status":"","message":"success"," ...

  6. Java8 :lambda表达式初体验

    package lambda; import java.util.ArrayList; import java.util.Arrays; import java.util.List; import j ...

  7. Readme for Software engineering

    作业任务: 软件工程 软件工程 作业要求 作业要求 作业目标 博客园.github注册 自我介绍 软工5问 自我介绍: 广东工业大学计算机学院18级信息安全二班 广东工业大学AD攻防工作室成员& ...

  8. 【系统之音】Android进程的创建及启动简述

    Android系统中的进程(这里不包括init等底层的进程)都是通过Zygote fork而来的,那这些进程的启动流程都是怎样的呢? 这里将Android进程分为两个部分: (1)系统框架进程Syst ...

  9. JavaGuide易错点总结

    基础知识易错点 1. object.equals("str") 容易报空指针异常,应使用"str".equals(object); 还可以使用JDK7引入的工具 ...

  10. ⏰ Moment.js 宣布停止开发,现在该用什么?

    本文整理自 Monent.js 官方英文公告 https://momentjs.com/docs/#/-project-status/ Moment.js 宣布停止开发,进入维护状态. 这是一个大而全 ...