最近研究了下如何利用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：

// 創(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)行：

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é)：

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

• 不支持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：

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)行：

node example.js

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

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

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ù)雜的話(huà)，截屏?xí)r間也挺長(zhǎng)的，我測(cè)試的頁(yè)面是幾百毫秒。

• Puppeteer是對(duì)（CDP）Chrome Devtools Protocol功能的封裝。大部分功能都是通過(guò)WebSocket傳輸給CDP處理的。

SlimerJS

SlimerJS和PhantomJS類(lèi)似。不同點(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：

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

運(yùn)行

// 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啟動(dòng)的是火狐默認(rèn)的安裝路徑，因?yàn)槲乙婚_(kāi)始就有火狐瀏覽器，所以啟動(dòng)的是最新版本的瀏覽器，然后就報(bào)錯(cuò)了，說(shuō)不兼容。在前面我安裝過(guò)一個(gè)59版本的火狐，那么這個(gè)火狐瀏覽器的路徑是什么？

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

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

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

不過(guò)，headless模式下，不支持WebGL。

我在寫(xiě)例子的時(shí)候，發(fā)現(xiàn)的一個(gè)明顯的不同就是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.0版本支持的火狐版本是53.0到59.0。不保證最新版本火狐可用。

• headless模式下，不支持WebGL。

dom-to-image

dom-to-image：前端截屏的開(kāi)源庫(kù)。工作原理是：
SVG的foreignObject標(biāo)簽可以包裹任意的html內(nèi)容。那么，為了渲染一個(gè)節(jié)點(diǎn)，主要進(jìn)行了以下步驟：

• 遞歸地拷貝原始dom節(jié)點(diǎn)和后代節(jié)點(diǎn)；

• 把原始節(jié)點(diǎn)以及后代節(jié)點(diǎn)的樣式遞歸的應(yīng)用到對(duì)應(yīng)的拷貝后的節(jié)點(diǎn)和后代節(jié)點(diǎn)上；

• 字體處理；

• 圖片處理；

• 序列化拷貝后的節(jié)點(diǎn)，把它插入到foreignObject里面，然后組成一個(gè)svg，然后生成一個(gè)data URL；

• 如果想得到PNG內(nèi)容或原始像素值，可以先使用data URL創(chuàng)建一個(gè)圖片，使用一個(gè)離屏canvas渲染這張圖片，然后從canvas中獲取想要的數(shù)據(jù)。

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

html2canvas

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

未驗(yàn)證的猜想

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

到此這篇關(guān)于JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)截屏的5種方法小結(jié)的文章就介紹到這了,更多相關(guān)JavaScript 網(wǎng)頁(yè)截屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論