⽤python 实现对元素的长截图
⼀.⽬标
浏览⽹页的时候,看见哪个元素,就能截取哪个元素当图⽚,不管那个元素有多长
⼆.所⽤⼯具和第三⽅库
python ,PIL,selenium
pycharm
抗疫歌曲
三.代码部分
长截图整体思路:
1.获取元素
2.移动,截图,移动,截图,直到抵达元素的底部
3.把截图按照元素所在位置切割,在所有图⽚中只保留该元素
4.拼接
如果driver 在环境变量中,那么不⽤指定路径
打开⽹站
b=webdriver.Chrome(executable_path=r "C:\Users\")#指定⼀下driver
<("")
b.maximize_window()#最⼤化窗⼝
我们可以看见⼀个ID 为maincontent 的元素,宽度为850PX ,长度为3828PX ,这个长度必须使⽤才能长截图才能完整截下来
我们还需要⼀个重要的参数,就是你电脑⼀次能截取多⾼的像素
先⽤下图代码获取⼀个图⽚
也就是说⽤我电脑上截图的默认⾼度为614像素
所以我设置⼀个变量:
sc_hight=614
然后设置⼀下其他变量
注释:
2.start_higth 为初始⾼度,这个没有什么可说的
3.max_px 为循环结束后,到达的⾼度
4.last_px 为元素最底部的⾼度
5.surplus_px 就是移动6次后,还没有截取的⾼度
屏幕每次移动,移动sc_hight 个像素,初始位置为(0,元素的Y 值)
el=b.find_element_by_id("maincontent")#到元素
#fp 为存放图⽚的地址
<_screenshot_as_file(fp)
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 ,初始值是元素的初始⾼度
time.sleep(0.5)
fp = r "C:\Users\wdj\Desktop\%s.png" % i  # 图⽚地址,运⾏的话,改⼀下
<_screenshot_as_file(fp)  # 屏幕截图,这⾥是截取是完整的⽹页图⽚,你可以打断点看⼀下图⽚
img = Image.open(fp=fp)
img2 = p((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  # 滚动到最后⼀个位置
fp = r "C:\Users\wdj\Desktop\last.png"
<_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 = p((el.location["x"], sc_hight - surplus_px, el.size["width"] + el.location["x"], sc_hight))支付宝商家收款码在哪
img2.save(fp)
img_path.append(fp)
上⾯是把该元素的在页⾯都截完,并且剪切,把图⽚保存的路径放⼊img_path
最后⼀步:把所有截图都贴到新创建的图⽚中
运⾏效果图
:
说明完整的截取下来了
补充优化:
如果是个⼩元素怎么办,不⽤长截图就能截取的那种
回乡偶书翻译因为很简单我就直接贴代码了
效果如下
:
print (js)
new_img = w("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")  # 保存
start_higth = el.location["y"]
js = "scrollTo(0,%s)" % (start_higth)
time.sleep(0.5)
fp = r "C:\Users\wdj\Desktop\test.png" # 图⽚地址,运⾏的话,改⼀下
<_screenshot_as_file(fp)
img = Image.open(fp=fp)
img2 = p((el.location["x"], 0, el.size["width"] + el.location["x"], el.size["height"]))  # 剪切图⽚
img2.save(fp)
完整代码:
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)
time.sleep(0.5)
fp = r"C:\Users\wdj\Desktop\test.png"# 图⽚地址,运⾏的话,改⼀下
<_screenshot_as_file(fp)
img = Image.open(fp=fp)
img2 = p((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  # 图⽚地址,运⾏的话,改⼀下
<_screenshot_as_file(fp)  # 屏幕截图,这⾥是截取是完整的⽹页图⽚,你可以打断点看⼀下图⽚
img = Image.open(fp=fp)
img2 = p((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  # 滚动到最后⼀个位置
fp = r"C:\Users\wdj\Desktop\last.png"
<_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 = p((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 = w("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\")#指定⼀下driver
<("www.w3school/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去掉就⾏