作為一個經(jīng)常寫博客的人,我有時會在 微博上分享博客內(nèi)容,可不知道從什么時候開始,國內(nèi)互聯(lián)網(wǎng)越來越喪失信仰,所有的廠商都在試圖打造一個“只進(jìn)不出”的信息孤島,進(jìn)而達(dá)到增強“用戶黏度”的目的。以微博為例,微博中的外鏈永遠(yuǎn)都會被轉(zhuǎn)化為短地址,并且無法通過微博內(nèi)置的瀏覽器進(jìn)行跳轉(zhuǎn)。即使你通過手動復(fù)制鏈接的方式打開鏈接,你依然需要至少兩個步驟方能見到“廬山真面目”。借鑒/抄襲這一陋習(xí)的還有 簡書,花時間做了一個第三方鏈接跳轉(zhuǎn)提示頁面,唯獨不愿意在上面加一個a標(biāo)簽,你還是要手動復(fù)制黏貼。坦白說,我覺得國內(nèi)互聯(lián)網(wǎng)正在喪失著信仰,看起來電商、物流、外賣、打車、支付……此起彼伏逐漸滲透到我們生活的方方面面,成為名副其實的“互聯(lián)網(wǎng)+”,可在信息泛濫的今天,我們越來越難找到真正有價值的信息……既然外鏈注定要被屏蔽掉,那我就勉為其難地順應(yīng)潮流發(fā)“長截圖”咯,所以,接下來我會為大家分享實現(xiàn)網(wǎng)頁"長截圖"的常見思路,希望對有類似煩惱或者需求的小伙伴們有所幫助。
通過瀏覽器實現(xiàn)
要實現(xiàn)網(wǎng)頁長截圖,顯然是和網(wǎng)頁打交道,而和網(wǎng)頁打交道最多的是誰呢?自然是我們每天都要用的瀏覽器啦!值得慶幸的是,不管是 Chrome 還是 Firefox ,我們都可以通過它們來是實現(xiàn)這個想法。
Chrome
對于 Chrome 來說,我們只需要“F12”打開開發(fā)者工具,并在其中找到“控制臺”選項卡,在平時輸入 JavaScript 腳本的地方(即 Console 選項卡)輸入Ctrl + Shift + P命令,然后你會得到一個類似 VSCode 命令行體驗的輸入窗口,接下來,輸入:Capture full size screenshot并回車。此時,我們就可以得到完整的頁面截圖。而如果你希望截取網(wǎng)頁中的一部分,則可以在選中指定 DOM 元素后采用相同的方式輸入命令:Capture node screenshot。此外,更常用的截取瀏覽器可見范圍內(nèi)的內(nèi)容,可以使用:Capture screenshot。可能相對于一般可以進(jìn)行拖拽截圖的工具而言,這個方案顯得有點笨拙且簡陋,可它真的可以完美地實現(xiàn)我們的想法,而且不需要安裝任何擴展或者插件。
使用 Chrome 的截圖功能
Firefox
對于 Firefox 而言,它本身自帶截圖功能,并且支持拖拽截圖,對于我們這些需要長截圖的人而言,唯一需要做的就是點擊幾下數(shù)據(jù),確實要比敲命令行要簡單一點、友好一點,我個人更喜歡用 Firefox 一點,因為 Chrome 正在從屠龍少年變成惡龍,為了讓這個世界上不是只有 Chrome 一種瀏覽器內(nèi)核,我決定支持一下 Firefox ,2020年因為疫情的原因, Mozila 裁員25%約250人,這家?guī)缀蹩恐硐胫髁x在維護(hù) Gecko 內(nèi)核的公司,之后可能再無法和 Google 的 Chrome 抗衡,而這個世界只有一種瀏覽器的時代我們都曾經(jīng)經(jīng)歷過,它的名字叫做 IE6 ,不禁令人感慨,簡直是開放 Web 的羅曼蒂克消亡史。
使用 Firefox 的截圖功能
通過Selenium實現(xiàn)
在我的認(rèn)知中,有瀏覽器的地方就有爬蟲,而有爬蟲的地方就有Selenium。原本好端端的UI自動化測試框架,怎么就助紂為虐做起爬蟲來了呢?其實,主要原因是它提供了一個可以和瀏覽器交互的環(huán)境,從某種意義上來講,Selenium 、PhantomJS 以及 Playwright 都可以認(rèn)為是類似的技術(shù),這里我們以Selenium為例,而通過Selenium實現(xiàn)網(wǎng)頁長截圖則主要有兩種方式:其一,是構(gòu)造一個足夠“大”的瀏覽器,然后調(diào)用save_screenshot()方法進(jìn)行截圖;其二,是通過“拖拽”滾動條來滾動截圖,然后再通過PIL進(jìn)行拼接,下面來看具體的代碼實現(xiàn):
def save_screenshot(url, fp_pic):
fireFoxOptions = webdriver.FirefoxOptions()
fireFoxOptions.set_headless()
driver = webdriver.Firefox(firefox_options=fireFoxOptions)
driver.get(url)
time.sleep(1)
# 設(shè)置瀏覽器寬度和高度
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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
這里我使用的是 Firefox 的驅(qū)動,喜歡 Chrome 的按個人喜好即可,這里我假設(shè)你已經(jīng)掌握了 Python 和 Selenium,如果需要一點輔助知識,可以參考博主的這篇文章:作為技術(shù)宅的我,是這樣追鬼滅の刃的 。這種方式的“長截圖”實現(xiàn)起來非常簡單,可是因為需要構(gòu)造一個非?!按蟆钡臑g覽器,所以,如果頁面適配沒有做好的話,可能會出現(xiàn)頁面元素變形的問題,其次,這種方式生成的圖片體積普遍比較大,所以,從總體上看主要就是這兩個缺點。而“滾動截圖”實現(xiàn)起來會稍微復(fù)雜一點,因為里面會涉及到一小部分計算:
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 # 需要滾動的次數(shù)
base_mat = np.atleast_2d(Image.open('temp.png')) # 打開截圖并轉(zhuǎn)為二維矩陣
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')) # 打開截圖并轉(zhuǎn)為二維矩陣
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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
這個方案本身沒有太大的問題,可如果你的網(wǎng)頁是那種頁面滾動時頭部固定的設(shè)計,譬如類似博主的博客這樣的風(fēng)格,此時這種方案就會有一點問題,每次截取都會包含頭部這部分,和我們最后想要實現(xiàn)的效果有一點出入,如果可以計算出頭部的高度,截圖或者拼接的時候把這個高度考慮進(jìn)去,就可以徹底解決這個問題,可這樣這個問題就從一個通用型問題變成一個局部型問題啦,果然,世上沒有完美的解決方案呢…
通過JavaScript實現(xiàn)
有人可能要說,博主你好偏心,為什么 Python 都出來了,作為前端三劍客之一的 JavaScript 還沒有出現(xiàn)?嗯,對此我想說——你不用說,我知道不就是**“人生苦短,我用Python”**嗎?人家前端世界里有個叫做 html2canvas 的庫,博主你可有耳聞?我笑了笑,我并沒有看了看我的勞力士,因為我沒有勞力士。好吧,既然這里提到了這個庫,那就來說說這個庫的實現(xiàn)思路吧,人家不是說了嘛?一切可以實現(xiàn)的東西,最終可以用 JavaScript 來實現(xiàn),我們來看看具體的代碼實現(xiàn),這里,首先準(zhǔn)備一個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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
非常簡單,輸入一個地址,然后通過一個iframe進(jìn)行預(yù)覽,點擊按鈕進(jìn)行截圖。下面給出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轉(zhuǎn)圖片
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
效果如下,你可以點擊 這里 訪問在線演示DEMO:
使用html2canvas實現(xiàn)的長截圖
這里使用iframe可能會引入跨域的問題,大家可以參考我的這篇文章:聊聊前端跨域的愛恨情仇 ,而 html2canvas 本身就提供了關(guān)于跨域問題的解決方案,大家可以參考這里:http://html2canvas.hertzen.com/configuration。
通過第三方工具實現(xiàn)
我知道程序員都喜歡自己去折騰,如果是前無古人、后無來者的東西,我建議去折騰,因為夢想還是要有的,萬一實現(xiàn)了呢?而我們這個圈子里同樣有一句經(jīng)典的話,叫做“不要重復(fù)制造輪子”,所以,博主這里找到了幾個輪子供大家參考,不喜歡在冬天動手寫代碼的人,可以收藏下這幾個工具,這個冬天實在是太冷了,冷到什么程度呢?大概聽見笑話都不大愿意笑,用羅翔老師的話說這叫做搞笑未遂。
wkhtml2image
wkhtml系列,一個命令行工具,可以將本地HTML文件或者遠(yuǎn)程URL指向的網(wǎng)頁轉(zhuǎn)化為圖片,該系列產(chǎn)品中還有wkhtml2pdf,顧名思義,網(wǎng)頁轉(zhuǎn)PDF,實際使用過程中基本沒什么問題,輸出的圖片1:1還原網(wǎng)頁,唯一的缺點是偶爾會丟失樣式,尤其是頁面中引入了第三方的JavaScript或者CSS的時候,整體上遠(yuǎn)程URL比本地HTML要穩(wěn)定一點,推薦系數(shù):4星。
長截圖03.png
PickFrom
PickFrom,一個在線的網(wǎng)頁轉(zhuǎn)圖片的服務(wù),填寫URL然后點擊按鈕即可,提供免費預(yù)覽一部分圖片的功能,完整圖片的查看、下載均需要支付一定費用,服務(wù)質(zhì)量還可以,但不適合我們這種被迫“白嫖”的窮人家的孩子,土豪們隨意,推薦系數(shù):4星
PickFrom
Tiomg
Tiomg,接下來是博主要重點推薦,它和 PickFrom 提供著相同的服務(wù),唯一不同的是,它是完全免費的,我現(xiàn)在主要用這個來工具來生成“長截圖”,不錯,我背叛了上面我寫的那些代碼,為什么要重復(fù)造輪子呢?有時候我想不明白,為什么國內(nèi)公司都喜歡那種“大而全”的軟件,恨不得要擁有競爭對手所有的特性,可明明大家都“卷”成這樣了,為什么不試試差異化的路線呢?可能,是因為低端競爭太多吧!推薦系數(shù):5星
Tiomg
冬天實在是沒有動力去寫有技術(shù)含量的東西啊!關(guān)于“長截圖”這個話題,差不多是從一周前開始關(guān)注、做實驗的,所以,請允許在下偶爾寫這樣一篇“水文”吧!關(guān)于“視頻是不能P的系列”,因為 Dlib 安裝起來實在討厭,而 OpenCV 提供的 68 特征點算法目前只支持 C++ ,研究起來難免要花一點時間,好了,這篇博客暫時先寫到這里吧,博主要先去冬眠啦,再見!
————————————————
版權(quán)聲明:本文為CSDN博主「雪輕鴻」的原創(chuàng)文章,遵循CC 4.0 BY-SA版權(quán)協(xié)議,轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/qinyuanpei/article/details/112429622
咨詢熱線:
86-592-5151555
地址: 廈門市集美區(qū)軟件園三期A3棟504室
QQ:1039899831
固話:86-592-5151555
手機:18020730588(賴先生)
官網(wǎng):m.haymarketdoctors.com
Copyright © 2000-2021 m.haymarketdoctors.com
游戲作品版權(quán)歸原作者享有,如無意之中侵犯了您的版權(quán),請您按照《版權(quán)保護(hù)投訴指引》來信告知,本網(wǎng)站將應(yīng)您的要求刪除。