使用python实现对元素的长截图功能


Posted in Python onNovember 14, 2019

一.目标

浏览网页的时候,看见哪个元素,就能截取哪个元素当图片,不管那个元素有多长

使用python实现对元素的长截图功能 

二.所用工具和第三方库

python ,PIL,selenium

pycharm

三.代码部分

长截图整体思路:

1.获取元素

2.移动,截图,移动,截图,直到抵达元素的底部

3.把截图按照元素所在位置切割,在所有图片中只保留该元素

4.拼接

如果driver在环境变量中,那么不用指定路径

b=webdriver.Chrome(executable_path=r"C:\Users\Desktop\chromedriver.exe")#指定一下driver
b.get("https://www.w3school.com.cn/html/html_links.asp")
b.maximize_window()#最大化窗口

打开网站

使用python实现对元素的长截图功能 

我们可以看见一个ID为maincontent的元素,宽度为850PX,长度为3828PX,这个长度必须使用才能长截图才能完整截下来

el=b.find_element_by_id("maincontent")#找到元素

我们还需要一个重要的参数,就是你电脑一次能截取多高的像素

先用下图代码获取一个图片

#fp为存放图片的地址
b.get_screenshot_as_file(fp)

使用python实现对元素的长截图功能 

也就是说用我电脑上截图的默认高度为614像素

所以我设置一个变量:

sc_hight=614

然后设置一下其他变量

count = int(el.size["height"] / sc_hight) # 元素的高度除以你每次截多少就是次数
  start_higth = el.location["y"] # 元素的初始高度
  max_px = start_higth + (count - 1) * sc_hight # for循环中最大的px
  last_px = el.size["height"] + start_higth - sc_hight # 元素最底部的位置
  surplus_px = last_px - max_px # 剩余的边的高度
  img_path = [] # 用来存放图片地址

注释:

1.count为元素的高度/每次截取的高度,比如这次实例中元素高度为3828PX,我每次截614px,需要6.2次,int之后变成6,也就是截6次,还剩一点,那一点后面再说

2.start_higth为初始高度,这个没有什么可说的

3.max_px为循环结束后,到达的高度

4.last_px为元素最底部的高度

5.surplus_px就是移动6次后,还没有截取的高度

屏幕每次移动,移动sc_hight个像素,初始位置为(0,元素的Y值)

for i in range(0, count):
    js = "scrollTo(0,%s)" % (start_higth + i * sc_hight) # 用于移动滑轮,每次移动614px,初始值是元素的初始高度
    b.execute_script(js) # 执行js
    time.sleep(0.5)
    fp = r"C:\Users\wdj\Desktop\%s.png" % i # 图片地址,运行的话,改一下
    b.get_screenshot_as_file(fp) # 屏幕截图,这里是截取是完整的网页图片,你可以打断点看一下图片
    img = Image.open(fp=fp)
    img2 = img.crop((el.location["x"], 0, el.size["width"] + el.location["x"], sc_hight)) # 剪切图片
    img2.save(fp) # 保存图片,覆盖完整的网页图片
    img_path.append(fp) # 添加图片路径
    time.sleep(0.5)
    print(js)
  else:
    js = "scrollTo(0,%s)" % last_px # 滚动到最后一个位置
    b.execute_script(js)
    fp = r"C:\Users\wdj\Desktop\last.png"
    b.get_screenshot_as_file(fp)
    img = Image.open(fp=fp)
    print((el.location["x"], sc_hight - surplus_px, el.size["width"] + el.location["x"], sc_hight))
    img2 = img.crop((el.location["x"], sc_hight - surplus_px, el.size["width"] + el.location["x"], sc_hight))
    img2.save(fp)
    img_path.append(fp)
    print(js)

上面是把该元素的在页面都截完,并且剪切,把图片保存的路径放入img_path

最后一步:把所有截图都贴到新创建的图片中

new_img = Image.new("RGB", (el.size["width"], el.size["height"])) # 创建一个新图片,大小为元素的大小
  k = 0
  for i in img_path:
    tem_img = Image.open(i)
    new_img.paste(tem_img, (0, sc_hight * k)) # 把图片贴上去,间隔一个截图的距离
    k += 1
  else:
    new_img.save(r"C:\Users\wdj\Desktop\test.png") # 保存

运行效果图:

使用python实现对元素的长截图功能 

说明完整的截取下来了

补充优化:

如果是个小元素怎么办,不用长截图就能截取的那种

因为很简单我就直接贴代码了

start_higth = el.location["y"]
  js = "scrollTo(0,%s)" % (start_higth)
  b.execute_script(js) # 执行js
  time.sleep(0.5)
  fp = r"C:\Users\wdj\Desktop\test.png" # 图片地址,运行的话,改一下
  b.get_screenshot_as_file(fp)
  img = Image.open(fp=fp)
  img2 = img.crop((el.location["x"], 0, el.size["width"] + el.location["x"], el.size["height"])) # 剪切图片
  img2.save(fp)

效果如下:

使用python实现对元素的长截图功能 

完整代码:

from selenium import webdriver
from PIL import Image
import time
def short_sc(el,b):
  start_higth = el.location["y"]
  js = "scrollTo(0,%s)" % (start_higth)
  b.execute_script(js) # 执行js
  time.sleep(0.5)
  fp = r"C:\Users\wdj\Desktop\test.png" # 图片地址,运行的话,改一下
  b.get_screenshot_as_file(fp)
  img = Image.open(fp=fp)
  img2 = img.crop((el.location["x"], 0, el.size["width"] + el.location["x"], el.size["height"])) # 剪切图片
  img2.save(fp)
def long_sc(el,b):
  count = int(el.size["height"] / sc_hight) # 元素的高度除以你每次截多少就是次数
  start_higth = el.location["y"] # 元素的初始高度
  max_px = start_higth + (count - 1) * sc_hight # for循环中最大的px
  last_px = el.size["height"] + start_higth - sc_hight # 元素最底部的位置
  surplus_px = last_px - max_px # 剩余的边的高度
  img_path = [] # 用来存放图片地址
  for i in range(0, count):
    js = "scrollTo(0,%s)" % (start_higth + i * sc_hight) # 用于移动滑轮,每次移动614px,初始值是元素的初始高度
    b.execute_script(js) # 执行js
    time.sleep(0.5)
    fp = r"C:\Users\wdj\Desktop\%s.png" % i # 图片地址,运行的话,改一下
    b.get_screenshot_as_file(fp) # 屏幕截图,这里是截取是完整的网页图片,你可以打断点看一下图片
    img = Image.open(fp=fp)
    img2 = img.crop((el.location["x"], 0, el.size["width"] + el.location["x"], sc_hight)) # 剪切图片
    img2.save(fp) # 保存图片,覆盖完整的网页图片
    img_path.append(fp) # 添加图片路径
    time.sleep(0.5)
    print(js)
  else:
    js = "scrollTo(0,%s)" % last_px # 滚动到最后一个位置
    b.execute_script(js)
    fp = r"C:\Users\wdj\Desktop\last.png"
    b.get_screenshot_as_file(fp)
    img = Image.open(fp=fp)
    print((el.location["x"], sc_hight - surplus_px, el.size["width"] + el.location["x"], sc_hight))
    img2 = img.crop((el.location["x"], sc_hight - surplus_px, el.size["width"] + el.location["x"], sc_hight))
    img2.save(fp)
    img_path.append(fp)
    print(js)
  new_img = Image.new("RGB", (el.size["width"], el.size["height"])) # 创建一个新图片,大小为元素的大小
  k = 0
  for i in img_path:
    tem_img = Image.open(i)
    new_img.paste(tem_img, (0, sc_hight * k)) # 把图片贴上去,间隔一个截图的距离
    k += 1
  else:
    new_img.save(r"C:\Users\wdj\Desktop\test.png") # 保存
b=webdriver.Chrome(executable_path=r"C:\Users\wdj\Desktop\chromedriver.exe")#指定一下driver
b.get("https://www.w3school.com.cn/html/html_links.asp")
b.maximize_window()#最大化窗口
# b.get_screenshot_as_file(fp)
sc_hight=614#你屏幕截图默认的大小,可以去截一张,去画图里面看看是多少像素,我这里是614像素
# b.switch_to.frame(b.find_element_by_xpath('//*[@id="intro"]/iframe'))
el=b.find_element_by_id("maincontent")#找到元素
if el.size["height"]>sc_hight:
  long_sc(el,b)
else:
  short_sc(el,b)

完整代码

PS:

有些特殊情况,比如截取的元素在iframe中,直接用driver.switch_to.frame(iframe元素)即可

或者不是iframe,但是元素有overflow属性,直接用JS把他的overflow去掉就行

Python 相关文章推荐
Python数据结构之Array用法实例
Oct 09 Python
Python性能优化的20条建议
Oct 25 Python
Python调用C++程序的方法详解
Jan 24 Python
Python3 加密(hashlib和hmac)模块的实现
Nov 23 Python
彻底搞懂Python字符编码
Jan 23 Python
Python实现的银行系统模拟程序完整案例
Apr 12 Python
详解python3 + Scrapy爬虫学习之创建项目
Apr 12 Python
python 字典操作提取key,value的方法
Jun 26 Python
Python OpenCV之图片缩放的实现(cv2.resize)
Jun 28 Python
pycharm中显示CSS提示的知识点总结
Jul 29 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
Dec 31 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
Feb 25 Python
Pycharm创建项目时如何自动添加头部信息
Nov 14 #Python
python3实现单目标粒子群算法
Nov 14 #Python
python socket 聊天室实例代码详解
Nov 14 #Python
python中dict()的高级用法实现
Nov 13 #Python
python实现的多任务版udp聊天器功能案例
Nov 13 #Python
利用python实现PSO算法优化二元函数
Nov 13 #Python
使用python制作一个解压缩软件
Nov 13 #Python
You might like
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
python编写的最短路径算法
2015/03/25 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
工作的心得体会
2013/12/31 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
2014年教研工作总结
2014/12/06 职场文书
少先队工作总结2015
2015/05/13 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
2015年教研员工作总结
2015/05/26 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
vue实现拖拽交换位置
2022/04/07 Vue.js