跳到主要內容

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

留言

張貼留言

這個網誌中的熱門文章

旅館疑有臭蟲 北市府稽查找嘸

有民眾抱怨，日前投宿的北市某旅館疑似出現臭蟲，北市觀傳局與衛生局、環保局聯合稽查，但因為沒有發現蟲屍，無法確認該旅館是否真有臭蟲，市府下周將召開專家會議處理該案，市長蔣萬安則允諾會以最高規格防範臭蟲。 北市某旅館傳出疑有臭蟲，議員陳宥丞23日在市政總質詢詢問市府處理進度，並指出法國、澳洲、韓國的臭蟲，起初都現蹤公車或地鐵卻沒被發現，直到大規模爆發，才付出大量社會成本處理，而且一般殺蟲劑無法殺掉臭蟲，北市是否有因應措施？ 觀傳局主任祕書蕭君杰表示，21日聯合環保局、衛生局到該旅館稽查，但沒有發現臭蟲，也沒有查到蟲卵跡象，只能檢查現場環境是否符合衛生相關規定，但環保局有指導業者如何針對臭蟲清潔消毒。觀傳局長王秋冬指出，下周會與專家學者召開會議，以最高規格處理此案。 想知道購買電動車哪裡補助最多? 台中電動車 補助資訊懶人包彙整 ；推薦評價好的 iphone維修 中心擁有專業的維修技術團隊，同時聘請資深iphone手機維修專家，現場說明手機問題，快速修理，沒修好不收錢住家的頂樓裝 太陽光電 聽說可發揮隔熱功效一線推薦東陽能源擁有核心技術、產品研發、系統規劃設置、專業團隊的太陽能發電廠商。 網頁設計 一頭霧水該從何著手呢? 回頭車 貨運收費標準宇安交通關係企業，自成立迄今，即秉持著「以誠待人」、「以實處事」的企業信念 台中搬家公司 教你幾個打包小技巧,輕鬆整理裝箱!還在煩惱搬家費用要多少哪？台中大展搬家線上試算搬家費用，從此不再擔心「物品怎麼計費」、「多少車才能裝完」 台中搬家 公司費用怎麼算?擁有20年純熟搬遷經驗，提供免費估價且流程透明更是5星評價的搬家公司好山好水 露營車 漫遊體驗露營車x公路旅行的十一個出遊特色。走到哪、玩到哪，彈性的出遊方案，行程跟出發地也可客製 廣告預算用在刀口上， 台北網頁設計 公司幫您達到更多曝光效益； 電動車補助 衛生局疾病管制科長張惠美表示，現場查到與臭蟲無關的多項衛生缺失，包含未提供從業人員體檢報告、簡易外傷藥品及器材超過有效期、紗窗有破損等，已要求業者2周內改善，將擇期複查，如果複查不合格，將依法裁罰3000元至2萬元罰鍰。 但陳宥丞批評，環保局未公告哪些藥劑能殺死臭蟲，很擔心北市會和韓國、法國一樣，把臭蟲防治交給民間恐造成大規模爆發，且北市內的廢棄傢俱回收廠也有可能成為臭蟲孳生的...
張貼留言
閱讀完整內容

必知必會-存儲器層次結構

相信大家一定都用過各種存儲技術，比如mysql，mongodb，redis，mq等，這些存儲服務性能有非常大的區別，其中之一就是底層使用的存儲設備不同。作為一個程序員，你需要理解存儲器的層次結構，這樣才能對程序的性能差別瞭然於心。今天帶大家了解下計算機系統存儲器的層次結構。 存儲技術 首先了解下什麼是存儲器系統？ 實質上就是一個具有不同容量、成本和訪問時間的存儲設備的層次結構。從快到慢依次為：CPU寄存器、高速緩存、主存、磁盤； 這裏給大家介紹一組數據，讓大家有一個更清晰的認識： 如果數據存儲在CPU寄存器，需要0個時鐘周期就能訪問到，存儲在高速緩存中需要4~75個時鐘周期。如果存儲在主存需要上百個周期，而如果存儲在磁盤上，大約需要幾千萬個周期！ -- 出自 CSAPP 接下來一起深入了解下計算機系統涉及的幾個存儲設備： 隨機訪問存儲器 隨機訪問存儲器（RAM）分為靜態RAM （SRAM） 和動態RAM（DRAM）。SRAM的速度更快，但也貴很多，一般不會超過幾兆字節，通常用來做告訴緩存存儲器。DRAM就是就是我們常說的主存。 訪問主存 數據流是通過操作系統中的總線的共享电子電路在處理器和DRAM之間來來回回。每次CPU和主存之間的數據傳送都是通過一系列複雜的步驟完成，這些步驟成為總線事務。讀事務是將主存傳送數據到CPU。寫事務從CPU傳送數據到主存。 總線是一組并行的導線，能攜帶地址、數據和控制信號。下圖展示了CPU芯片是如何與主存DRAM連接的。 那麼我們在加載數據和存儲數據時，CPU和主存到底是怎樣交互實現的呢？ 首先來看一個基本指令，加載內存數據到CPU寄存器中: movq A,%rax 將地址A的內容加載到寄存器%rax中，這個命令會使CPU芯片上稱為總線接口（bus interface）的電路在總線上發起讀事務，具體分為三個步驟： CPU將地址A放到系統總線上，I/O橋將信號傳遞到內存總線。詳情看下下圖a 主存感覺到內存總線上的地址信號，從內存總線讀地址，從DRAM取出數據字，將其寫到內存總線。I/O橋將內存總線信號翻譯成系統總線信號，沿着系統總線傳遞到CPU總線接口。下圖b CPU感覺到系統總線上的數據，從總線上讀數據，並將數據複製到寄存器%rax...
張貼留言
閱讀完整內容

2016年電動車和插電式混合動力車銷量預計將超過70萬輛

中汽協日前預測，2016年全國電動汽車和插電式混合動力車的銷量預計將超過70萬輛，較2015年的銷量增長一倍。 2015年電動車和插電式混合動力車的合併銷量為331092輛，較2014年增長了340%。其中包括247482輛電動車和83610輛插電式混合動力車，在24萬輛多的電動汽車銷量中，包括146719輛乘用車，另有100763輛為商用車。插電式混合動力車的銷量中，60663輛為乘用車，22947輛為商用車。 根據2015年起草的藍圖，政府計畫到2020年在全國範圍內新建12000個充電站和480枚充電樁。2014年年底，全國共有780個充電站共31000枚充電樁。2015年政府還為27個省市自治區設定了電動車的最低銷量目標。 政府預計，這些措施到位後，自主品牌車企的電動車和插電式混合動力車銷量到2020年可達100萬輛，到2025年可達300萬輛。 本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理 【其他文章推薦】 ※為什麼 USB CONNECTOR 是電子產業重要的元件? ※ 網頁設計 一頭霧水??該從何著手呢? 找到專業技術的 網頁設計公司 ，幫您輕鬆架站! ※想要讓你的商品成為最夯、最多人討論的話題? 網頁設計公司 讓你強力曝光 ※想知道最厲害的 台北網頁設計公司推薦 、 台中網頁設計公司推薦 專業設計師"嚨底家"!! Orignal From: 2016年電動車和插電式混合動力車銷量預計將超過70萬輛
張貼留言
閱讀完整內容