[[359085]]

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

1.  PhantomJS
2.  Puppeteer(chrome headless)
3.  SlimerJS
4.  dom-to-image
5.  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進(jìn)行編程的headless瀏覽器，使用的是QtWebKit內(nèi)核。

實現(xiàn)截屏的代碼，假設(shè)文件名為github.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();  
}) 

運行： 

phantomjs github.js 

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

總結(jié)：

1.  PhantomJs已經(jīng)停止維護(hù)了，所以不太建議繼續(xù)使用。停止維護(hù)的一個原因是chrome發(fā)布的headless版本對它造成了一定沖擊。
2.  不支持WebGL。但是，還是有開發(fā)者說可以自己給PhantomJS添加WebGL支持，不過，這個方案目前超出我的知識范圍了，就沒有繼續(xù)研究。

Puppeteer(chrome headless)

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

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

運行： 

node example.js 

接下來看下screenshot方法的實現(xiàn)原理：

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.

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

簡單來說，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é)：

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

SlimerJS

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

SlimerJS可以通過npm安裝，最新版本是1.x。不過兼容的火狐版本是53.0到59.0。我看現(xiàn)在火狐最新版本都82了。因為我本機(jī)是安裝了火狐最新版本的，所以我還得安裝一個老版本的火狐，比如59.0?？梢詤⒖歼@篇安裝舊版本的火狐瀏覽器。我是mac系統(tǒng)，感覺安裝還是挺容易的。

實現(xiàn)截屏的代碼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操作系統(tǒng)設(shè)置火狐路徑  
export SLIMERJSLAUNCHER=/Applications/Firefox.app/Contents/MacOS/firefox  
./node_modules/.bin/slimerjs screenshot.js // 我是局部安裝的slimer包 

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

在應(yīng)用程序里面我把這個舊版本的火狐命名為Firefox59，然后這個路徑就是/Applications/Firefox59.app/Contents/MacOS/firefox。重新設(shè)置SLIMERJSLAUNCHER為59版本的火狐瀏覽器之后，發(fā)現(xiàn)就能成功了。

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

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

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

我在寫例子的時候，發(fā)現(xiàn)的一個明顯的不同就是Puppeteer截屏是異步函數(shù)，而SlimerJS截屏是同步函數(shù)？好奇心驅(qū)使下，看了下源碼（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;  
} 

關(guān)鍵代碼就是那行ctx.drawWindow。what？JS原生API還支持直接截屏？

CanvasRenderingContext2D.drawWindow()：只有火狐支持，已經(jīng)被廢棄掉的非規(guī)范定義的標(biāo)準(zhǔn)API。

總結(jié)

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

dom-to-image

dom-to-image：前端截屏的開源庫。工作原理是：

SVG的foreignObject標(biāo)簽可以包裹任意的html內(nèi)容。那么，為了渲染一個節(jié)點，主要進(jìn)行了以下步驟：

1.  遞歸地拷貝原始dom節(jié)點和后代節(jié)點；
2.  把原始節(jié)點以及后代節(jié)點的樣式遞歸的應(yīng)用到對應(yīng)的拷貝后的節(jié)點和后代節(jié)點上；
3.  字體處理；
4.  圖片處理；
5.  序列化拷貝后的節(jié)點，把它插入到foreignObject里面，然后組成一個svg，然后生成一個data URL；
6.  如果想得到PNG內(nèi)容或原始像素值，可以先使用data URL創(chuàng)建一個圖片，使用一個離屏canvas渲染這張圖片，然后從canvas中獲取想要的數(shù)據(jù)。

測試的時候，發(fā)現(xiàn)外部資源不能加載，所以簡單的了解了后就放棄了。

html2canvas

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

未驗證的猜想

雖然后面這兩種是前端的實現(xiàn)方式，但是結(jié)合前面講的headless庫，也是可以實現(xiàn)后端截屏的。以Puppeteer的API為例，可以首先使用page.addScriptTag(options)往網(wǎng)頁中添加前端截屏的庫，然后在page.evaluate(pageFunction[, ...args])中的pageFunction函數(shù)里面寫相應(yīng)的截屏代碼就可以了，因為pageFunction的執(zhí)行上下文是網(wǎng)頁上下文，所以可以獲取到document等對象。

總結(jié)

對截屏的一個簡單研究，寫篇博客整理下思路。