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

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

名詞定義

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

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

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

3.  不支持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é)：

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

2.  支持WebGL。

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

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

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

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

dom-to-image

dom-to-image：前端截屏的開(kāi)源庫(kù)。工作原理是：

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

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

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

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

4.  字體處理；

5.  圖片處理；

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

7.  如果想得到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è)截屏操作就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站標(biāo)題：JavaScript中怎么實(shí)現(xiàn)網(wǎng)頁(yè)截屏操作
本文路徑：http://www.chinadenli.net/article24/geegce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、自適應(yīng)網(wǎng)站、ChatGPT、品牌網(wǎng)站制作、電子商務(wù)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)