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

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

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

**名詞定義**

headless browser

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

**PhantomJS**

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

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

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

運(yùn)行：

```js
phantomjs github.js
```

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

總結(jié)：

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

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

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

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

實(shí)現(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 ); // 打開(kāi)頁(yè)面
    await page.screenshot({path:  example.png }); // path: 截屏文件保存路徑

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

運(yùn)行：

```text
node example.js
```

接下來(lái)看下screenshot方法的實(shí)現(xiàn)原理：

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

```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,
    });
    // ...
}
```

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

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

” 看到最后面那個(gè)DevTools Protocol了嗎？這是個(gè)什么東西：

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

” 詳細(xì)的解釋可以看這篇博客。

簡(jiǎn)單來(lái)說(shuō)，Puppeteer就是通過(guò)WebSocket給瀏覽器發(fā)送遵循Chrome Devtools Protocol的數(shù)據(jù)，命令瀏覽器去執(zhí)行一些操作。然后，瀏覽器再通過(guò)WebSocket把結(jié)果返回給Puppeteer。這個(gè)過(guò)程是異步的，所以看源代碼會(huì)發(fā)現(xiàn)好多async/await。

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

總結(jié)：

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

**SlimerJS**

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

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

因?yàn)槲冶緳C(jī)是安裝了火狐最新版本的，所以我還得安裝一個(gè)老版本的火狐，比如59.0?？梢詤⒖歼@篇安裝舊版本的火狐瀏覽器。我是mac系統(tǒng)，感覺(jué)安裝還是挺容易的。

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