【JS】912- 實現網頁截屏五種方法

作者@luckness
來源@https://segmentfault.com/a/1190000037673677

最近研究了下如何利用JavaScript實現網頁截屏，包括在瀏覽器運行的JS，以及在後臺運行的nodeJs的方法。主要看了以下幾個：

PhantomJS
Puppeteer(chrome headless)
SlimerJS
dom-to-image
html2canvas

測試的網頁使用了WebGL技術，所以下面的總結會和WebGL相關。

名詞定義

headless browser

無界面瀏覽器，多用於網頁自動化測試、網頁截屏、網頁的網絡監控等。

PhantomJS

PhantomJS是可以通過JS進行編程的headless瀏覽器，使用的是QtWebKit內核。

實現截屏的代碼，假設文件名爲github.js：

// 創建一個網頁實例
var page = require('webpage').create();
// 加載頁面
page.open('http://github.com/', function () {
    // 給網頁截屏，保存到github.png文件中
    page.render('github.png');
    phantom.exit();
})

運行：

phantomjs github.js

普通的頁面沒有問題，但是如果運行包含WebGL的頁面，發現截屏不對。經過一些調查，發現不支持WebGL，github issue。

總結：

PhantomJs已經停止維護了，所以不太建議繼續使用。停止維護的一個原因是chrome發佈的headless版本對它造成了一定衝擊。
不支持WebGL。但是，還是有開發者說可以自己給PhantomJS添加WebGL支持，不過，這個方案目前超出我的知識範圍了，就沒有繼續研究。

Puppeteer(chrome headless)

Puppeteer是一個Node庫，提供了控制chrome和chromium的API。默認運行headless模式，也支持界面運行。

實現截屏的代碼example.js：

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setViewport({ // 設置視窗大小
    width: 600,
    height: 800
    });
    await page.goto('https://example.com'); // 打開頁面
    await page.screenshot({path: 'example.png'}); // path: 截屏文件保存路徑

    await browser.close();
})();

運行：

node example.js

接下來看下screenshot方法的實現原理：

screenshot的源碼位於lib/cjs/puppeteer/common/Page.js文件中，是一個異步方法：

async screenshot(options = {}) {
    // ...
    return this._screenshotTaskQueue.postTask(() => this._screenshotTask(screenshotType, options));
}
async _screenshotTask(format, options) {
    // ...
    const result = await this._client.send('Page.captureScreenshot', {
    format,
    quality: options.quality,
    clip,
    });
    // ...
}

這個this._client.send又是個什麼東西？別急，我們重新看下Puppeteer的定義：

“
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.
”

看到最後面那個DevTools Protocol了嗎？這是個什麼東西：

“
The Chrome DevTools Protocol allows for tools to instrument, inspect, debug and profile Chromium, Chrome and other Blink-based browsers.
”

詳細的解釋可以看這篇博客。

簡單來說，Puppeteer就是通過WebSocket給瀏覽器發送遵循Chrome Devtools Protocol的數據，命令瀏覽器去執行一些操作。然後，瀏覽器再通過WebSocket把結果返回給Puppeteer。這個過程是異步的，所以看源代碼會發現好多async/await。

所以screenshot方法是調用了Chrome Devtools Protocol的captureScreenshot。

總結：

支持WebGL。
網頁比較複雜的話，截屏時間也挺長的，我測試的頁面是幾百毫秒。
Puppeteer是對（CDP）Chrome Devtools Protocol功能的封裝。大部分功能都是通過WebSocket傳輸給CDP處理的。

SlimerJS

SlimerJS和PhantomJS類似。不同點是SlimerJS是基於火狐的瀏覽器引擎Gecko，而不是Webkit。

SlimerJS可以通過npm安裝，最新版本是1.x。不過兼容的火狐版本是53.0到59.0。我看現在火狐最新版本都82了。因爲我本機是安裝了火狐最新版本的，所以我還得安裝一個老版本的火狐，比如59.0。可以參考這篇安裝舊版本的火狐瀏覽器。我是mac系統，感覺安裝還是挺容易的。

實現截屏的代碼screenshot.js：

var page = require('webpage').create();
page.open("http://slimerjs.org", function (status) {
    page.viewportSize = { width:1024, height:768 };
    page.render('screenshot.png');
});

運行

// mac操作系統設置火狐路徑
export SLIMERJSLAUNCHER=/Applications/Firefox.app/Contents/MacOS/firefox
./node_modules/.bin/slimerjs screenshot.js // 我是局部安裝的slimer包

需要注意的是SLIMERJSLAUNCHER=/Applications/Firefox.app/Contents/MacOS/firefox啓動的是火狐默認的安裝路徑，因爲我一開始就有火狐瀏覽器，所以啓動的是最新版本的瀏覽器，然後就報錯了，說不兼容。在前面我安裝過一個59版本的火狐，那麼這個火狐瀏覽器的路徑是什麼？

在應用程序裏面我把這個舊版本的火狐命名爲Firefox59，然後這個路徑就是/Applications/Firefox59.app/Contents/MacOS/firefox。重新設置SLIMERJSLAUNCHER爲59版本的火狐瀏覽器之後，發現就能成功了。

不過，Puppeteer默認會打開瀏覽器界面，也就是non-headless模式。如果要使用headless模式，可以

    ./node_modules/.bin/slimerjs --headless screenshot.js

不過，headless模式下，不支持WebGL。

我在寫例子的時候，發現的一個明顯的不同就是Puppeteer截屏是異步函數，而SlimerJS截屏是同步函數？好奇心驅使下，看了下源碼（src/modules/slimer-sdk/webpage.js）：

render: function(filename, options) {
    // ...
    let canvas = webpageUtils.getScreenshotCanvas(
    browser.contentWindow,
    finalOptions.ratio,
    finalOptions.onlyViewport, this);
    }
    canvas.toBlob(function(blob) {
    let reader = new browser.contentWindow.FileReader();
    reader.onloadend = function() {
        content = reader.result;
    }
    reader.readAsBinaryString(blob);
    }, finalOptions.contentType, finalOptions.quality);
    // ...
}

webpageUtils.getScreenshotCanvas(src/modules/webpageUtils.jsm):

getScreenshotCanvas : function(window, ratio, onlyViewport, webpage) {
    // ...
    // create the canvas
    let canvas = window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    let ctx = canvas.getContext("2d");
    ctx.scale(ratio, ratio);
    ctx.drawWindow(window, clip.left, clip.top, clip.width, clip.height, "rgba(0,0,0,0)");
    ctx.restore();

    return canvas;
}

關鍵代碼就是那行ctx.drawWindow。what？JS原生API還支持直接截屏？
CanvasRenderingContext2D.drawWindow()：只有火狐支持，已經被廢棄掉的非規範定義的標準API。

總結

1.0版本支持的火狐版本是53.0到59.0。不保證最新版本火狐可用。
headless模式下，不支持WebGL。

dom-to-image

dom-to-image：前端截屏的開源庫。工作原理是：
SVG的foreignObject標籤可以包裹任意的html內容。那麼，爲了渲染一個節點，主要進行了以下步驟：

遞歸地拷貝原始dom節點和後代節點；
把原始節點以及後代節點的樣式遞歸的應用到對應的拷貝後的節點和後代節點上；
字體處理；
圖片處理；
序列化拷貝後的節點，把它插入到foreignObject裏面，然後組成一個svg，然後生成一個data URL；
如果想得到PNG內容或原始像素值，可以先使用data URL創建一個圖片，使用一個離屏canvas渲染這張圖片，然後從canvas中獲取想要的數據。

測試的時候，發現外部資源不能加載，所以簡單的瞭解了後就放棄了。

html2canvas

html2canvas。網上查了下感覺有一篇文章寫的挺好的：淺析 js 實現網頁截圖的兩種方式。感興趣的可以看下。

未驗證的猜想

雖然後面這兩種是前端的實現方式，但是結合前面講的headless庫，也是可以實現後端截屏的。以Puppeteer的API爲例，可以首先使用page.addScriptTag(options)往網頁中添加前端截屏的庫，然後在page.evaluate(pageFunction[, ...args])中的pageFunction函數裏面寫相應的截屏代碼就可以了，因爲pageFunction的執行上下文是網頁上下文，所以可以獲取到document等對象。