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

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

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

**名詞定義**

headless browser

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

**PhantomJS**

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

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

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

運行：

```js
phantomjs github.js
```

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

總結：

1、PhantomJs已經停止維護了，所以不太建議繼續使用。停止維護的一個原因是chrome發布的headless版本對它造成了一定沖擊。

2、不支持WebGL。但是，還是有開發者說可以自己給PhantomJS添加WebGL支持，不過，這個方案目前超出我的知識范圍了，就沒有繼續研究。

**Puppeteer(chrome** **headless)**

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

實現截屏的代碼example.js：

```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();
})();
```

運行：

```text
node example.js
```

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

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

```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：

```js
var page = require( webpage ).create();
page.open("    page.viewportSize = { width:1024, height:768 };
    page.render( screenshot.png );
});
```

```js
getScreenshotCanvas : function(window, ratio, onlyViewport, webpage) {
    // ...
    // create the canvas
    let canvas = window.document.createElementNS("    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

更多關于“html5培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓經驗，課程大綱更科學更專業，有針對零基礎的就業班，有針對想提升技術的提升班，高品質課程助理你實現夢想。