文章目錄
- 通過瀏覽器實作
- Chrome
- Firefox
- 通過Selenium實作
- 通過JavaScript實作
- 通過第三方工具實作
- wkhtml2image
- PickFrom
- Tiomg
作為一個經常寫博客的人，我有時會在 微博上分享博客內容，可不知道從什么時候開始，國內互聯網越來越喪失信仰，所有的廠商都在試圖打造一個“只進不出”的資訊孤島，進而達到增強“用戶黏度”的目的，以微博為例，微博中的外鏈永遠都會被轉化為短地址，并且無法通過微博內置的瀏覽器進行跳轉，即使你通過手動復制鏈接的方式打開鏈接，你依然需要至少兩個步驟方能見到“廬山真面目”，借鑒/抄襲這一陋習的還有 簡書，花時間做了一個第三方鏈接跳轉提示頁面，唯獨不愿意在上面加一個a標簽，你還是要手動復制黏貼，坦白說，我覺得國內互聯網正在喪失著信仰，看起來電商、物流、外賣、打車、支付……此起彼伏逐漸滲透到我們生活的方方面面，成為名副其實的“互聯網+”，可在資訊泛濫的今天，我們越來越難找到真正有價值的資訊……既然外鏈注定要被屏蔽掉，那我就勉為其難地順應潮流發“長截圖”咯，所以，接下來我會為大家分享實作網頁"長截圖"的常見思路，希望對有類似煩畝訓者需求的小伙伴們有所幫助，
通過瀏覽器實作
要實作網頁長截圖，顯然是和網頁打交道，而和網頁打交道最多的是誰呢？自然是我們每天都要用的瀏覽器啦！值得慶幸的是，不管是 Chrome 還是 Firefox ，我們都可以通過它們來是實作這個想法，
Chrome
對于 Chrome 來說，我們只需要“F12”打開開發者工具，并在其中找到“控制臺”選項卡，在平時輸入 JavaScript 腳本的地方(即 Console 選項卡)輸入Ctrl + Shift + P命令，然后你會得到一個類似 VSCode 命令列體驗的輸入視窗，接下來，輸入：Capture full size screenshot并回車，此時，我們就可以得到完整的頁面截圖，而如果你希望截取網頁中的一部分，則可以在選中指定 DOM 元素后采用相同的方式輸入命令：Capture node screenshot，此外，更常用的截取瀏覽器可見范圍內的內容，可以使用：Capture screenshot，可能相對于一般可以進行拖拽截圖的工具而言，這個方案顯得有點笨拙且簡陋，可它真的可以完美地實作我們的想法，而且不需要安裝任何擴展或者插件，
Firefox
對于 Firefox 而言，它本身自帶截圖功能，并且支持拖拽截圖，對于我們這些需要長截圖的人而言，唯一需要做的就是點擊幾下資料，確實要比敲命令列要簡單一點、友好一點，我個人更喜歡用 Firefox 一點，因為 Chrome 正在從屠龍少年變成惡龍，為了讓這個世界上不是只有 Chrome 一種瀏覽器內核，我決定支持一下 Firefox ，2020年因為疫情的原因， Mozila 裁員25%約250人，這家幾乎靠著理想主義在維護 Gecko 內核的公司，之后可能再無法和 Google 的 Chrome 抗衡，而這個世界只有一種瀏覽器的時代我們都曾經經歷過，它的名字叫做 IE6 ，不禁令人感慨，簡直是開放 Web 的羅曼蒂克消亡史，
通過Selenium實作
在我的認知中，有瀏覽器的地方就有爬蟲，而有爬蟲的地方就有Selenium，原本好端端的UI自動化測驗框架，怎么就助紂為虐做起爬蟲來了呢？其實，主要原因是它提供了一個可以和瀏覽器互動的環境，從某種意義上來講，Selenium 、PhantomJS 以及 Playwright 都可以認為是類似的技術，這里我們以Selenium為例，而通過Selenium實作網頁長截圖則主要有兩種方式：其一，是構造一個足夠“大”的瀏覽器，然后呼叫save_screenshot()方法進行截圖；其二，是通過“拖拽”滾動條來滾動截圖，然后再通過PIL進行拼接，下面來看具體的代碼實作：
def save_screenshot(url, fp_pic):
fireFoxOptions = webdriver.FirefoxOptions()
fireFoxOptions.set_headless()
driver = webdriver.Firefox(firefox_options=fireFoxOptions)
driver.get(url)
time.sleep(1)
# 設定瀏覽器寬度和高度
width = driver.execute_script(
"return document.documentElement.scrollWidth"
)
height = driver.execute_script(
"return document.documentElement.scrollHeight"
)
driver.set_window_size(width, height)
time.sleep(1)
# 截圖
driver.save_screenshot(fp_pic)
driver.close()
這里我使用的是 Firefox 的驅動，喜歡 Chrome 的按個人喜好即可，這里我假設你已經掌握了 Python 和 Selenium，如果需要一點輔助知識，可以參考博主的這篇文章：作為技術宅的我，是這樣追鬼滅の刃的 ，這種方式的“長截圖”實作起來非常簡單，可是因為需要構造一個非常“大”的瀏覽器，所以，如果頁面適配沒有做好的話，可能會出現頁面元素變形的問題，其次，這種方式生成的圖片體積普遍比較大，所以，從總體上看主要就是這兩個缺點，而“滾動截圖”實作起來會稍微復雜一點，因為里面會涉及到一小部分計算：
def save_screenshot2(url, fp_pic):
fireFoxOptions = webdriver.FirefoxOptions()
fireFoxOptions.set_headless()
driver = webdriver.Firefox(firefox_options=fireFoxOptions)
driver.fullscreen_window() # 全屏視窗
driver.get(url)
window_height = driver.get_window_size()['height'] # 視窗高度
page_height = driver.execute_script(
'return document.documentElement.scrollHeight'
) # 頁面高度
driver.save_screenshot('temp.png')
if page_height > window_height:
n = page_height // window_height # 需要滾動的次數
base_mat = np.atleast_2d(Image.open('temp.png')) # 打開截圖并轉為二維矩陣
for i in range(n):
driver.execute_script(
f'document.documentElement.scrollTop={window_height * (i+1)};'
)
time.sleep(.5)
driver.save_screenshot(f'temp_{i}.png') # 保存截圖
mat = np.atleast_2d(Image.open(f'temp_{i}.png')) # 打開截圖并轉為二維矩陣
base_mat = np.append(base_mat, mat, axis=0) # 拼接圖片的二維矩陣
Image.fromarray(base_mat).save(fp_pic, format='PNG')
os.remove(f'temp_{i}.png')
os.remove('temp.png')
driver.quit()
這個方案本身沒有太大的問題，可如果你的網頁是那種頁面滾動時頭部固定的設計，譬如類似博主的博客這樣的風格，此時這種方案就會有一點問題，每次截取都會包含頭部這部分，和我們最后想要實作的效果有一點出入，如果可以計算出頭部的高度，截圖或者拼接的時候把這個高度考慮進去，就可以徹底解決這個問題，可這樣這個問題就從一個通用型問題變成一個區域型問題啦，果然，世上沒有完美的解決方案呢…
通過JavaScript實作
有人可能要說，博主你好偏心，為什么 Python 都出來了，作為前端三劍客之一的 JavaScript 還沒有出現？嗯，對此我想說——你不用說，我知道不就是**“人生苦短，我用Python”**嗎？人家前端世界里有個叫做 html2canvas 的庫，博主你可有耳聞？我笑了笑，我并沒有看了看我的勞力士，因為我沒有勞力士，好吧，既然這里提到了這個庫，那就來說說這個庫的實作思路吧，人家不是說了嘛？一切可以實作的東西，最終可以用 JavaScript 來實作，我們來看看具體的代碼實作，這里，首先準備一個HTML檔案：
<!DOCTYPE html>
<head>
<script src='./html2canvas.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body style="overflow: hidden;">
<div id="app" style="height: 768px; overflow: hidden;">
請輸入URL: <input type="text" v-model="url">
<button v-on:click="capture">截取</button>
<hr>
<iframe
id="view"
v-bind:src='url'
width="100%"
height="100%"
frameborder="0"
ref="view">
</iframe>
</div>
</body>
非常簡單，輸入一個地址，然后通過一個iframe進行預覽，點擊按鈕進行截圖，下面給出JavaScript代碼：
<script>
var vm = new Vue({
el: '#app',
data: {
url: 'https://regularly-archive.github.io/2020/Matrix/',
},
methods: {
capture: function() {
var self = this;
var iframe = self.$refs.view.contentWindow;
var iframeBody = iframe.document.getElementsByTagName('body')[0]
html2canvas(iframeBody).then(canvas => {
document.body.appendChild(canvas);
//canvas轉圖片
let canvasImg = canvas.toDataURL("image/png");
//模擬下載
var a = document.createElement('a')
a.href = canvasImg;
a.download = self.url;
let event = document.createEvent("MouseEvents")
event.initMouseEvent("click", true, false,
window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
a.dispatchEvent(event)
});
}
}
});
</script>
效果如下，你可以點擊 這里 訪問在線演示DEMO：
這里使用iframe可能會引入跨域的問題，大家可以參考我的這篇文章：聊聊前端跨域的愛恨情仇 ，而 html2canvas 本身就提供了關于跨域問題的解決方案，大家可以參考這里：http://html2canvas.hertzen.com/configuration，
通過第三方工具實作
我知道程式員都喜歡自己去折騰，如果是前無古人、后無來者的東西，我建議去折騰，因為夢想還是要有的，萬一實作了呢？而我們這個圈子里同樣有一句經典的話，叫做“不要重復制造輪子”，所以，博主這里找到了幾個輪子供大家參考，不喜歡在冬天動手寫代碼的人，可以收藏下這幾個工具，這個冬天實在是太冷了，冷到什么程度呢?大概聽見笑話都不大愿意笑，用羅翔老師的話說這叫做搞笑未遂，
wkhtml2image
wkhtml系列，一個命令列工具，可以將本地HTML檔案或者遠程URL指向的網頁轉化為圖片，該系列產品中還有wkhtml2pdf，顧名思義，網頁轉PDF，實際使用程序中基本沒什么問題，輸出的圖片1:1還原網頁，唯一的缺點是偶爾會丟失樣式，尤其是頁面中引入了第三方的JavaScript或者CSS的時候，整體上遠程URL比本地HTML要穩定一點，推薦系數：4星，
PickFrom
PickFrom，一個在線的網頁轉圖片的服務，填寫URL然后點擊按鈕即可，提供免費預覽一部分圖片的功能，完整圖片的查看、下載均需要支付一定費用，服務質量還可以，但不適合我們這種被迫“白嫖”的窮人家的孩子，土豪們隨意，推薦系數：4星
Tiomg
Tiomg，接下來是博主要重點推薦，它和 PickFrom 提供著相同的服務，唯一不同的是，它是完全免費的，我現在主要用這個來工具來生成“長截圖”，不錯，我背叛了上面我寫的那些代碼，為什么要重復造輪子呢？有時候我想不明白，為什么國內公司都喜歡那種“大而全”的軟體，恨不得要擁有競爭對手所有的特性，可明明大家都“卷”成這樣了，為什么不試試差異化的路線呢？可能，是因為低端競爭太多吧！推薦系數：5星
冬天實在是沒有動力去寫有技術含量的東西啊！關于“長截圖”這個話題，差不多是從一周前開始關注、做實驗的，所以，請允許在下偶爾寫這樣一篇“水文”吧！關于“視頻是不能P的系列”，因為 Dlib 安裝起來實在討厭，而 OpenCV 提供的 68 特征點演算法目前只支持 C++ ，研究起來難免要花一點時間，好了，這篇博客暫時先寫到這里吧，博主要先去冬眠啦，再見!
CSDN認證博客專家
.NET
Python
偽·全堆疊攻城獅
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/247600.html
標籤：AI