跳到主要內容

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

留言

張貼留言

這個網誌中的熱門文章

有了四步解題法模板，再也不害怕動態規劃！（看不懂算我輸）

導言 動態規劃問題一直是算法面試當中的重點和難點，並且動態規劃這種通過空間換取時間的算法思想在實際的工作中也會被頻繁用到，這篇文章的目的主要是解釋清楚 什麼是動態規劃 ，還有就是面對一道動態規劃問題，一般的 思考步驟 以及其中的注意事項等等，最後通過幾道題目將理論和實踐結合。 什麼是動態規劃 如果你還沒有聽說過動態規劃，或者僅僅只有耳聞，或許你可以看看 Quora 上面的這個 回答 。 How to explain dynamic 用一句話解釋動態規劃就是 " 記住你之前做過的事 "，如果更準確些，其實是 " 記住你之前得到的答案 "。 我舉個大家工作中經常遇到的例子。 在軟件開發中，大家經常會遇到一些系統配置的問題，配置不對，系統就會報錯，這個時候一般都會去 Google 或者是查閱相關的文檔，花了一定的時間將配置修改好。 過了一段時間，去到另一個系統，遇到類似的問題，這個時候已經記不清之前修改過的配置文件長什麼樣，這個時候有兩種方案，一種方案還是去 Google 或者查閱文檔，另一種方案是借鑒之前修改過的配置，第一種做法其實是萬金油，因為你遇到的任何問題其實都可以去 Google，去查閱相關文件找答案，但是這會花費一定的時間，相比之下，第二種方案肯定會更加地節約時間，但是這個方案是有條件的，條件如下： 之前的問題和當前的問題有着關聯性，換句話說，之前問題得到的答案可以幫助解決當前問題 需要記錄之前問題的答案 當然在這個例子中，可以看到的是，上面這兩個條件均滿足，大可去到之前配置過的文件中，將配置拷貝過來，然後做些細微的調整即可解決當前問題，節約了大量的時間。 不知道你是否從這些描述中發現，對於一個動態規劃問題，我們只需要從兩個方面考慮，那就是 找出問題之間的聯繫 ，以及 記錄答案 ，這裏的難點其實是找出問題之間的聯繫，記錄答案只是順帶的事情，利用一些簡單的數據結構就可以做到。 概念 上面的解釋如果大家可以理解的話，接    動態規劃 算法是通過拆分問題，定義問題狀態和狀態之間的關係，使得問題能夠以遞推（或者說分治）的方式去解決。它的幾個重要概念如下所述。    階段： 對於一個完整的問題過程，適當的切分為若干個相互聯繫的子問題，每次在求解一個子問題...
張貼留言
閱讀完整內容

純電動 Mini Cooper SE 將成為中國國產車，年產 16 萬輛

BMW 集團與中國長城汽車合資，將於江蘇建立新廠，專門投入生產 MINI Cooper SE 和部分長城品牌電動車，預計於 2022 年完工並投入生產，每年將可生產 16 萬輛電動車。 靈動可愛的 Mini Cooper，在許多車迷心中都有著特殊的地位，今年 7 月發表了首款純電動版本的 Mini Cooper SE 之後，獲得熱烈迴響，預訂數量已接近 8 萬台，顯示大家對於純電 Mini 的熱愛，因為油電版的 Mini Cooper Countryman 的全球總銷售量也才 3 萬出頭。 Mini Cooper SE 之前公布了官方定價，最低從 27,900 歐元起算，美國售價約 29,900 美元。相比現有的三門款，只貴了一成左右。然而，三年後，中國消費者將有機會買到最便宜的電動 Mini。 電動 Mini Cooper SE 最低價是 27,900 歐元，扣掉全額補助最低可以到 24,400 歐元。 BMW 集團與中國長城汽車集團於 2018 年宣布，將組建合資公司光束汽車，投入在中國的電動車生產計畫，而現在他們正式宣布啟動計畫，於江蘇張家港打造一個新工廠，全部投入電動車的製造，包括了 Mini Cooper SE 和其他長城汽車旗下的電動車。 目前的電動 Mini 只在英國牛津工廠製造，不難想像當產能轉移到中國後，Mini Cooper SE 的價格將有機會進一步調降，來競爭全球最大的電動車市場。這座屬於合資公司光束汽車的新工廠，採用一個新的產銷模式，由 BMW 和長城共同合作開發、設計、製造新產品，但是銷售通路完全沿用原本的品牌渠道。 換句話說，2020 年到 2022 年銷售的電動 Mini，將會是英國製造，而 2022 年後就會有中國製造版本開賣，考量到 Mini 在中國每年約有 30 萬輛的銷售額，同時油電版的 Coutryman 銷量更佔了全球將近五分之一，無怪乎 BMW 會想在最接近主要市場的地方蓋工廠囉。 外型完美復刻油車版 最後，簡單介紹一下 Mini Cooper SE 這台車。Mini 在電動化的路上，盡力保持著跟經典造型一致的設計，畢竟大家愛的就是它的設計。電動版的 Mini 車頭、車身跟車屁股都多了一個黃色的插頭標誌，車頭的氣壩則變成封閉式設計，除此之外，幾乎看不出來差別，連馬達...
張貼留言
閱讀完整內容

我的USB為什麼總是無法識別，到底是為甚麼呢?這真的讓我好困擾

其實判斷軟件硬件問題很簡單,在別的機器或換個系統試試就可以了.有些小的問題不妨先用專門軟件格式化下.還有提醒你WINDOWS下格式化時要選擇FAT,不要選FAT32。 倘若插入後，在右下角彈出電腦正在嘗試連接此USB設備的一些信息，有時會彈出對話框讓用戶選擇，有些用戶還沒看清就點了否，或者因為電腦一些初始的設置問題，禁止了USB的一些功能。解決辦法：右鍵點"我的電腦"，選"屬性"--"硬件"--"驅動器簽名"，在此選擇"忽略"，點"確定"。然後重新插上usb，還是不連的話，再右鍵點"我的電腦"--"屬性"--"硬件"--"設備管理器"，從中找到"通用串行總線控制器"，右鍵，然後"掃描檢測硬件改動"。如果都不行那就是USB識別程序或U盤的問題從控制面板進入添加或刪除硬件將所有USB設備都刪除，重新安裝需要使用的USB設備驅動程序，重新啟動電腦 USB CONNECTOR   USB CONNECTOR  USB CONNECTOR Orignal From: 我的USB為什麼總是無法識別，到底是為甚麼呢?這真的讓我好困擾
張貼留言
閱讀完整內容