JS 實現(xiàn)網(wǎng)頁截屏五種方法
作者：luckness
原文：https://segmentfault.com/a/1190000037673677
最近研究了下如何利用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進(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é)：
PhantomJs已經(jīng)停止維護(hù)了，所以不太建議繼續(xù)使用。停止維護(hù)的一個原因是chrome發(fā)布的headless版本對它造成了一定沖擊。 不支持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é)：
支持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：
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.0版本支持的火狐版本是53.0到59.0。不保證最新版本火狐可用。 headless模式下，不支持WebGL。
dom-to-image
dom-to-image：前端截屏的開源庫。工作原理是：
SVG的foreignObject標(biāo)簽可以包裹任意的html內(nèi)容。那么，為了渲染一個節(jié)點，主要進(jìn)行了以下步驟：
遞歸地拷貝原始dom節(jié)點和后代節(jié)點； 把原始節(jié)點以及后代節(jié)點的樣式遞歸的應(yīng)用到對應(yīng)的拷貝后的節(jié)點和后代節(jié)點上； 字體處理； 圖片處理； 序列化拷貝后的節(jié)點，把它插入到foreignObject里面，然后組成一個svg，然后生成一個data URL； 如果想得到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等對象。
一些推薦
【Blazor 開源控件庫】點擊瀏覽
【B/S 開源項目】點擊瀏覽
【W(wǎng)PF 開源控件庫】點擊瀏覽
【W(wǎng)PF 開源項目】點擊瀏覽
【Xamarin 開源項目】點擊瀏覽
【W(wǎng)inform 開源控件庫】點擊瀏覽
【W(wǎng)inform 開源項目】點擊瀏覽
【Qt 開源控件庫】點擊瀏覽
【Qt 開源項目】點擊瀏覽
【更多分享】點擊瀏覽
資源分享
回復(fù)數(shù)字【01】：獲取DotNet技術(shù)資料 回復(fù)數(shù)字【02】：獲取Java技術(shù)資料 回復(fù)數(shù)字【03】：獲取Android技術(shù)資料 回復(fù)數(shù)字【04】：獲取C++技術(shù)資料 回復(fù)數(shù)字【05】：獲取Qt技術(shù)資料 回復(fù)數(shù)字【06】：獲取React資源 添加號主微信號【dotnet9】：備注【入群】加入與大佬們的技術(shù)交流 添加QQ群【771992300】：備注【Dotnet9】加入技術(shù)交流，無人數(shù)上限、有資源共享
?時間如流水，只能流去不流回。
公眾號：Dotnet9 號主微信號：dotnet9 原文作者：luckness 編輯：沙漠之盡頭的狼 日期：2020-12-15 微信公眾號：Dotnet9
點擊閱讀原文，瀏覽Dotnet9更多好文。