跳到主要內容

用python實現對元素的長截圖

一.目標


瀏覽網頁的時候，看見哪個元素，就能截取哪個元素當圖片，不管那個元素有多長



 


二.所用工具和第三方庫


python ,PIL,selenium


pycharm


三.代碼部分


長截圖整體思路:


1.獲取元素


2.移動，截圖，移動，截圖，直到抵達元素的底部


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


4.拼接


 


如果driver在環境變量中，那麼不用指定路徑


b=webdriver.Chrome(executable_path=r"C:\Users\Desktop\chromedriver.exe")#指定一下driver
 b.get("")
 b.maximize_window()#最大化窗口

打開網站



 


 


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


 


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

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


先用下圖代碼獲取一個圖片


#fp為存放圖片的地址
 b.get_screenshot_as_file(fp)


 


也就是說用我電腦上截圖的默認高度為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")  # 保存

 


運行效果圖:




說明完整的截取下來了


 


 


 


補充優化:


如果是個小元素怎麼辦，不用長截圖就能截取的那種


因為很簡單我就直接貼代碼了


    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)

效果如下:



 


 


完整代碼:


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去掉就行


 


 


 


 


 
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※想知道網站建置、網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計及後台網頁設計



※不管是台北網頁設計公司、台中網頁設計公司，全省皆有專員為您服務



※Google地圖已可更新顯示潭子電動車充電站設置地點!!



※帶您來看台北網站建置，台北網頁設計，各種案例分享



※別再煩惱如何寫文案,掌握八大原則!


Orignal From: 用python實現對元素的長截圖

留言

張貼留言

這個網誌中的熱門文章

掃地機器人可以隨身帶上飛機嗎?我想要拿去送給國外的朋友

掃地機器人如果要隨身戴上飛機需要滿足兩個條件： 一個是掃地機器人連同你的隨身行李，整體的體積和重量要符合上機條件，這個具體每家航空公司都不同，可以諮詢，簡單的說就是隨身行李不要超寬超重。 還有一個就是由於掃地機器人內置了鋰電池，所以內置電池的容量要符合相關規定，每個掃地機器人電池容量都不同，具體自行查詢。 根據民航的相關安全要求，凡帶有鋰電池的電子設備均不可以托運，但符合重量要求，尺寸要求以及電量要求的鋰電池及其設備是可以帶上飛機的。 《鋰電池航空運輸規範》中內含鋰離子電池的設備電池額定能量不應超過100Wh的規定，符合國標GB31241-2014，並通過UN38.3航空運輸認證等國際安全標準，所以可以帶上飛機。但是不能托運，只能隨身攜帶。 掃地機器人     掃地機器人     掃地機器人吸塵器 http://www.greenh3y.com/?p=400 Orignal From: 掃地機器人可以隨身帶上飛機嗎?我想要拿去送給國外的朋友
張貼留言
閱讀完整內容

不滿國際規範斷財路 非洲多國擬退野生動保公約

摘錄自2019年09月01日中央通訊社非洲報導 非洲南部多國揚言退出「瀕臨絕種野生動植物國際貿易公約」，因為公約多數成員拒絕放寬象牙與犀牛角交易，並且幾乎全面禁止將野生捕獲的大象送到動物園。 這個公約嚴格規範全球野生動物交易，包括限制象牙與犀牛角交易。 本週在日內瓦召開修訂「瀕臨絕種野生動植物國際貿易公約」（CITES）的會議期間，由於區域集團非南開發共同體（SADC）的多項提案遭否決，這個集團與公約的關係惡化。 全球大象數量最多的區域波札那、納米比亞與辛巴威要求販售取自自然死亡、充公與汰除的大象象牙，這項提議被居多數的101票否決。 40多年前制訂的CITES規範約3萬6000種動植物交易，並設計有助於遏止非法交易和制裁違規國家的機制。 不過有16個成員國的非南開發共同體部分會員批評CITES對非洲國家的問題視若無睹。 坦尚尼亞環境部長西蒙巴徹恩（George Simbachawene）於日內瓦召開的會議中表示：「結果無法採取進步、公平、包容與基於科學的的保育策略。」 他說：「該是認真重新考慮我們加入CITES是否有任何實質益處的時候了。」 本站聲明:網站內容來源環境資訊中心https://e-info.org.tw/,如有侵權,請聯繫我們,我們將及時處理 【搬家相關資訊指南】 台中搬家 , 彰化搬家 , 南投搬家 前需注意的眉眉角角，別等搬了再說! 避免吃悶虧無故遭抬價! 台中搬家公司 免費估價,有契約讓您安心有保障! 評比 彰化搬家公司費用 , 南投搬家公司費用 收費行情懶人包大公開 彰化搬家費用 , 南投搬家費用 ,距離,噸數怎麼算?達人教你簡易估價知識! Orignal From: 不滿國際規範斷財路 非洲多國擬退野生動保公約
張貼留言
閱讀完整內容

全球第一國 帛琉立法禁用、禁售防曬乳

摘錄自2018年11月2日蘋果日報帛琉報導 為了保護珊瑚礁生態，帛琉政府昨（1）日表示已立法嚴禁販售並使用防曬乳，此法將於2020年1月1日起正式生效。帛琉也成為全球首個全面禁止防曬乳的國家。 帛琉國會上周通過此法案，全面禁止使用和販售含有10種有害化學物質的防曬乳，違者將被處以1000美元（約3萬783元台幣）罰款。若遊客被發現私帶防曬乳入境，也會遭到沒收。帛琉總統雷蒙傑索（Tommy Remengesau）說：「沒收（防曬乳）已經足夠讓人不進行商業使用，而這也是很聰明的一招，一方面教育觀光客，又不會把他們嚇跑。」 根據官方說法，帛琉的熱門潛水點每小時會有4艘載著觀光客的船隻造訪，他們身上的防曬乳化學物質相當可觀。總統府發言人說：「帛琉各潛水和浮潛地點每天都有好幾加崙的防曬乳入海。我們只是盡力要防止環境遭受污染。」 本站聲明:網站內容來源環境資訊中心https://e-info.org.tw/,如有侵權,請聯繫我們,我們將及時處理 【其他文章推薦】 ※ 台中搬家 , 彰化搬家 , 南投搬家 前需注意的眉眉角角，別等搬了再說! ※在找尋 搬家 公司嗎? ※搬家不受騙不被宰 桃園搬家公司 , 桃園市搬家公司 公開報價讓你比價不吃虧! Orignal From: 全球第一國 帛琉立法禁用、禁售防曬乳
張貼留言
閱讀完整內容