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

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

測試的網(wǎng)頁使用了WebGL技術(shù)，所以下面的總結(jié)會和WebGL相關(guān)。

**名詞定義**

headless browser

無界面瀏覽器，多用于網(wǎng)頁自動化測試、網(wǎng)頁截屏、網(wǎng)頁的網(wǎng)絡(luò)監(jiān)控等。

**PhantomJS**

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

實現(xiàn)截屏的代碼，假設(shè)文件名為github.js：

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

運行：

```js
phantomjs github.js
```

普通的頁面沒有問題，但是如果運行包含WebGL的頁面，發(fā)現(xiàn)截屏不對。經(jīng)過一些調(diào)查，發(fā)現(xiàn)不支持WebGL，github issue。

總結(jié)：

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

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

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

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

實現(xiàn)截屏的代碼example.js：

```js
const puppeteer = require( puppeteer );

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setViewport({ // 設(shè)置視窗大小
    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方法的實現(xiàn)原理：

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給瀏覽器發(fā)送遵循Chrome Devtools Protocol的數(shù)據(jù)，命令瀏覽器去執(zhí)行一些操作。然后，瀏覽器再通過WebSocket把結(jié)果返回給Puppeteer。這個過程是異步的，所以看源代碼會發(fā)現(xiàn)好多async/await。

所以screenshot方法是調(diào)用了Chrome Devtools Protocol的captureScreenshot。

總結(jié)：

- 支持WebGL。
- 網(wǎng)頁比較復(fù)雜的話，截屏?xí)r間也挺長的，我測試的頁面是幾百毫秒。
- Puppeteer是對（CDP）Chrome Devtools Protocol功能的封裝。大部分功能都是通過WebSocket傳輸給CDP處理的。

**SlimerJS**

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

SlimerJS可以通過npm安裝，最新版本是1.x。不過兼容的火狐版本是53.0到59.0。我看現(xiàn)在火狐最新版本都82了。

因為我本機是安裝了火狐最新版本的，所以我還得安裝一個老版本的火狐，比如59.0。可以參考這篇安裝舊版本的火狐瀏覽器。我是mac系統(tǒng)，感覺安裝還是挺容易的。

實現(xiàn)截屏的代碼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;

更多關(guān)于“html5培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗，課程大綱更科學(xué)更專業(yè)，有針對零基礎(chǔ)的就業(yè)班，有針對想提升技術(shù)的提升班，高品質(zhì)課程助理你實現(xiàn)夢想。