一.目標(biāo)

瀏覽網(wǎng)頁(yè)的時(shí)候，看見哪個(gè)元素，就能截取哪個(gè)元素當(dāng)圖片，不管那個(gè)元素有多長(zhǎng)

二.所用工具和第三方庫(kù)

python ,PIL,selenium

pycharm

三.代碼部分

長(zhǎng)截圖整體思路:

1.獲取元素

2.移動(dòng)，截圖，移動(dòng)，截圖，直到抵達(dá)元素的底部

3.把截圖按照元素所在位置切割，在所有圖片中只保留該元素

4.拼接

如果driver在環(huán)境變量中，那么不用指定路徑

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()#最大化窗口

打開網(wǎng)站

我們可以看見一個(gè)ID為maincontent的元素，寬度為850PX，長(zhǎng)度為3828PX，這個(gè)長(zhǎng)度必須使用才能長(zhǎng)截圖才能完整截下來

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

我們還需要一個(gè)重要的參數(shù)，就是你電腦一次能截取多高的像素

先用下圖代碼獲取一個(gè)圖片

#fp為存放圖片的地址

b.get_screenshot_as_file(fp)

也就是說用我電腦上截圖的默認(rèn)高度為614像素

所以我設(shè)置一個(gè)變量:

sc_hight=614

然后設(shè)置一下其他變量

count = int(el.size["height"] / sc_hight) # 元素的高度除以你每次截多少就是次數(shù)

start_higth = el.location["y"] # 元素的初始高度

max_px = start_higth + (count - 1) * sc_hight # for循環(huán)中最大的px

last_px = el.size["height"] + start_higth - sc_hight # 元素最底部的位置

surplus_px = last_px - max_px # 剩余的邊的高度

img_path = [] # 用來存放圖片地址

注釋:

1.count為元素的高度/每次截取的高度，比如這次實(shí)例中元素高度為3828PX，我每次截614px，需要6.2次，int之后變成6,也就是截6次，還剩一點(diǎn)，那一點(diǎn)后面再說

2.start_higth為初始高度，這個(gè)沒有什么可說的

3.max_px為循環(huán)結(jié)束后，到達(dá)的高度

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

5.surplus_px就是移動(dòng)6次后，還沒有截取的高度

屏幕每次移動(dòng)，移動(dòng)sc_hight個(gè)像素，初始位置為(0,元素的Y值)

for i in range(0, count):

js = "scrollTo(0,%s)" % (start_higth + i * sc_hight) # 用于移動(dòng)滑輪，每次移動(dòng)614px，初始值是元素的初始高度

b.execute_script(js) # 執(zhí)行js

time.sleep(0.5)

fp = r"C:\Users\wdj\Desktop\%s.png" % i # 圖片地址，運(yùn)行的話，改一下

b.get_screenshot_as_file(fp) # 屏幕截圖,這里是截取是完整的網(wǎng)頁(yè)圖片，你可以打斷點(diǎn)看一下圖片

img = Image.open(fp=fp)

img2 = img.crop((el.location["x"], 0, el.size["width"] + el.location["x"], sc_hight)) # 剪切圖片

img2.save(fp) # 保存圖片，覆蓋完整的網(wǎng)頁(yè)圖片

img_path.append(fp) # 添加圖片路徑

time.sleep(0.5)

print(js)

else:

js = "scrollTo(0,%s)" % last_px # 滾動(dòng)到最后一個(gè)位置

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)

上面是把該元素的在頁(yè)面都截完，并且剪切，把圖片保存的路徑放入img_path

最后一步:把所有截圖都貼到新創(chuàng)建的圖片中

new_img = Image.new("RGB", (el.size["width"], el.size["height"])) # 創(chuàng)建一個(gè)新圖片,大小為元素的大小

k = 0

for i in img_path:

tem_img = Image.open(i)

new_img.paste(tem_img, (0, sc_hight * k)) # 把圖片貼上去,間隔一個(gè)截圖的距離

k += 1

else:

new_img.save(r"C:\Users\wdj\Desktop\test.png") # 保存

運(yùn)行效果圖:

說明完整的截取下來了

補(bǔ)充優(yōu)化:

如果是個(gè)小元素怎么辦，不用長(zhǎng)截圖就能截取的那種

因?yàn)楹芎?jiǎn)單我就直接貼代碼了

start_higth = el.location["y"]

js = "scrollTo(0,%s)" % (start_higth)

b.execute_script(js) # 執(zhí)行js

time.sleep(0.5)

fp = r"C:\Users\wdj\Desktop\test.png" # 圖片地址，運(yùn)行的話，改一下

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)

效果如下:

完整代碼:

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) # 執(zhí)行js

time.sleep(0.5)

fp = r"C:\Users\wdj\Desktop\test.png" # 圖片地址，運(yùn)行的話，改一下

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) # 元素的高度除以你每次截多少就是次數(shù)

start_higth = el.location["y"] # 元素的初始高度

max_px = start_higth + (count - 1) * sc_hight # for循環(huán)中最大的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) # 用于移動(dòng)滑輪，每次移動(dòng)614px，初始值是元素的初始高度

b.execute_script(js) # 執(zhí)行js

time.sleep(0.5)

fp = r"C:\Users\wdj\Desktop\%s.png" % i # 圖片地址，運(yùn)行的話，改一下

b.get_screenshot_as_file(fp) # 屏幕截圖,這里是截取是完整的網(wǎng)頁(yè)圖片，你可以打斷點(diǎn)看一下圖片

img = Image.open(fp=fp)

img2 = img.crop((el.location["x"], 0, el.size["width"] + el.location["x"], sc_hight)) # 剪切圖片

img2.save(fp) # 保存圖片，覆蓋完整的網(wǎng)頁(yè)圖片

img_path.append(fp) # 添加圖片路徑

time.sleep(0.5)

print(js)

else:

js = "scrollTo(0,%s)" % last_px # 滾動(dòng)到最后一個(gè)位置

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"])) # 創(chuàng)建一個(gè)新圖片,大小為元素的大小

k = 0

for i in img_path:

tem_img = Image.open(i)

new_img.paste(tem_img, (0, sc_hight * k)) # 把圖片貼上去,間隔一個(gè)截圖的距離

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#你屏幕截圖默認(rèn)的大小，可以去截一張，去畫圖里面看看是多少像素，我這里是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去掉就行

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的python如何截长图_使用python实现对元素的长截图功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。