跳到主要內容

用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實現對元素的長截圖

留言

張貼留言

這個網誌中的熱門文章

架構設計 | 異步處理流程，多種實現模式詳解

本文源碼：GitHub·點這裏 || GitEE·點這裏 一、異步處理 1、異步概念 異步處理不用阻塞當前線程來等待處理完成，而是允許後續操作，直至其它線程將處理完成，並回調通知此線程。 必須強調一個基礎邏輯，異步是一種設計理念，異步操作不等於多線程，MQ中間件，或者消息廣播，這些是可以實現異步處理的方式。 同步處理和異步處理相對，需要實時處理並響應，一旦超過時間會結束會話，在該過程中調用方一直在等待響應方處理完成並返回。同步類似電話溝通，需要實時對話，異步則類似短信交流，發送消息之後無需保持等待狀態。 2、異步處理優點 雖然異步處理不能實時響應，但是處理複雜業務場景，多數情況都會使用異步處理。 異步可以解耦業務間的流程關聯，降低耦合度； 降低接口響應時間，例如用戶註冊，異步生成相關信息表； 異步可以提高系統性能，提升吞吐量； 流量削峰即把請求先承接下來，然後在異步處理； 異步用在不同服務間，可以隔離服務，避免雪崩； 異步處理的實現方式有很多種，常見多線程，消息中間件，發布訂閱的廣播模式，其根據邏輯在於先把請求承接下來，放入容器中，在從容器中把請求取出，統一調度處理。 注意 ：一定要監控任務是否產生積壓過度情況，任務如果積壓到雪崩之勢的地步，你會感覺每一片雪花都想勇闖天涯。 3、異步處理模式 異步流程處理的實現有好多方式，但是實際開發中常用的就那麼幾種，例如： 基於接口異步響應，常用在第三方對接流程； 基於消息生產和消費模式，解耦複雜流程； 基於發布和訂閱的廣播模式，常見系統通知 異步適用的業務場景，對數據強一致性的要求不高，異步處理的數據更多時候追求的是最終一致性。 二、接口響應異步 1、流程描述 基於接口異步響應的方式，有一個本地業務服務，第三方接口服務，流程如下： 本地服務發起請求，調用第三方服務接口； 請求包含業務參數，和成功或失敗的回調地址； 第三方服務實時響應流水號，作為該調用的標識； 之後第三方服務處理請求，得到最終處理結果； 如果處理成功，回調本地服務的成功通知接口； 如果處理失敗，回調本地服務的失敗通知接口； 整個流程基於部分異步和部分實時的模式，完整處理； 注意 ：如...
張貼留言
閱讀完整內容

.NET Core前後端分離快速開發框架(Core.3.0+AntdVue)

.NET Core前後端分離快速開發框架(Core.3.0+AntdVue) 目錄 引言 時間真快，轉眼今年又要過去了。回想今年，依次開源發布了 Colder.Fx.Net.AdminLTE(254Star) 、 Colder.Fx.Core.AdminLTE(335Star) 、 DotNettySocket(82Star) 、 IdHelper(47Star) ，這些框架及組件都是本着以實際出發，實事求是的態度，力求提高開發效率（我自己都是第一個使用者），目前來看反響不錯。但是隨着前端和後端技術的不斷變革，尤其是前端，目前大環境已經是前後端完全分離為主的開發模式，在這樣的大環境和必然趨勢之下，傳統的MVC就顯得有些落伍了。在這樣的背景下，一款前後端分離的.NET開發框架就顯得尤為必要，由此便定了框架的升級目標： 前後端分離 。 首先後端技術的選擇，從目前的數據來看，.NET Core的發展遠遠快於.NET Framework，最簡單的分析就是Colder.Fx.Core.AdminLTE發布比Colder.Fx.Net.AdminLTE晚，但是星星卻後來居上而且比前者多30%，並且這個差距在不斷擴大，由點及面的分析可以看出我們廣大.NET開發人員學習的熱情和积極向上的態度，並不是某些人所認為的那麼不堪（ 走自己的路，讓別人說去吧 ）。大環境上微軟积極擁抱開源，大力發展.NET Core， 可以說前途一片光明。因此後端決定採用 .NET Core3.0 ，不再浪費精力去支持.NET Framework。 然後是前端技術選擇，首選是三大js框架選擇，也是從實際出發，Vue相對其它而言更加容易上手，並且功能也毫不遜色，深得各種大小公司喜歡，如果偏要說缺點的話，那就是對TS支持不行，但是即將發布Vue3.0肯定會改變這一缺陷。選擇了Vue之後，然後就是UI框架的選擇了，這裏的選擇更多了，我選擇了Ant Design Vue，理由便是簡潔方便，十分符合我的設計理念。 技術選型完畢之後便...
張貼留言
閱讀完整內容

台北市住宅、社區建創儲能設備 最高可獲600萬元補助

為了推廣分散式發電，台北市環保局預計補助1億元供住宅社區設置創能、儲能設備，計有3種方案可供選擇。環保局說明，每案補助額度不超過建制總經費49％，社區每案最高可獲200萬至600萬元補助，住宅每案補助上限100萬元，5月1日起開放申請。 環保局說明，台北市溫室氣體排放量7成以上來自住商部門，其中以使用電力造成間接溫室氣體排放為大宗，台北市平均年用電量約159.86億度，1度電約等同排放0.5公斤二氧化碳，若想達成2050年淨零排放目標，僅靠節能減碳無法達成，必須發展綠色創能、儲能，並且參考歐洲、日本的做法，採分散式發電方式，推廣到社區、住家、商辦，達到供電自給自足目標。 因此，環保局推出「台北市住宅社區創能儲能及節能補助計畫」，補助對象為台北市轄內房屋所有權人及社區管理委員會，補助方案共計3種，每一申請人或每一場址僅能獲1次補助，每案補助額度不超過建置總經費49％為限，5月1日到7月31日開放申請，但補助經費用完即停止申請。 環保局說明，方案A補助對象以社區為主，公共區域申請創能儲能及節能項目，每案補助上限新台幣600萬元；方案B分為住宅或社區公共區域申請創能搭配儲能項目（創能或儲能方案不得單獨申請），社區每案補助上限新台幣400萬元，住宅每案補助上限100萬元。方案C補助對象也是社區，公共區域申請節能項目，每案補助上限新台幣200萬元。 網頁設計 最專業,超強功能平台可客製,窩窩以「數位行銷」「品牌經營」「網站與應用程式」「印刷品設計」等四大主軸，為每一位客戶客製建立行銷脈絡及洞燭市場先機,請問 台中電動車 哪裡在賣比較便宜可以到台中景泰電動車門市去看看總店：臺中市潭子區潭秀里雅潭路一段102-1號。 電動車補助 推薦評價好的 iphone維修 中心擁有專業的維修技術團隊，同時聘請資深iphone手機維修專家，現場說明手機問題，快速修理，沒修好不收錢住家的頂樓裝 太陽光電 聽說可發揮隔熱功效一線推薦東陽能源擁有核心技術、產品研發、系統規劃設置、專業團隊的太陽能發電廠商。 網頁設計 一頭霧水該從何著手呢? 回頭車 貨運收費標準宇安交通關係企業，自成立迄今，即秉持著「以誠待人」、「以實處事」的企業信念 台中搬家公司 教你幾個打包小技巧,輕鬆整理裝箱!還在煩惱搬家費用要多少哪？台中大展搬家線上試算搬家費用，從此不再擔心「物品怎麼計費」、「多...
張貼留言
閱讀完整內容