這篇文章給大家介紹JavaScript中怎么實現(xiàn)網(wǎng)頁截屏操作，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、成都網(wǎng)站制作、貢山網(wǎng)絡(luò)推廣、重慶小程序開發(fā)公司、貢山網(wǎng)絡(luò)營銷、貢山企業(yè)策劃、貢山品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供貢山建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

名詞定義

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：

// 創(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. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

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

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

Puppeteer(chrome headless)

Puppeteer是一個Node庫，提供了控制chrome和chromium的API。默認運行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.

詳細的解釋可以看這篇博客。

簡單來說，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. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  支持WebGL。

3.  網(wǎng)頁比較復(fù)雜的話，截屏?xí)r間也挺長的，我測試的頁面是幾百毫秒。

4.  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啟動的是火狐默認的安裝路徑，因為我一開始就有火狐瀏覽器，所以啟動的是最新版本的瀏覽器，然后就報錯了，說不兼容。在前面我安裝過一個59版本的火狐，那么這個火狐瀏覽器的路徑是什么？

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

不過，Puppeteer默認會打開瀏覽器界面，也就是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. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  1.0版本支持的火狐版本是53.0到59.0。不保證最新版本火狐可用。

3.  headless模式下，不支持WebGL。

dom-to-image

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

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

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  遞歸地拷貝原始dom節(jié)點和后代節(jié)點；

3.  把原始節(jié)點以及后代節(jié)點的樣式遞歸的應(yīng)用到對應(yīng)的拷貝后的節(jié)點和后代節(jié)點上；

4.  字體處理；

5.  圖片處理；

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

7.  如果想得到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等對象。

關(guān)于JavaScript中怎么實現(xiàn)網(wǎng)頁截屏操作就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。