實現(xiàn)網(wǎng)頁長截圖

作為一個經(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