前端常用的截圖保存的方法

利用 Blob 對(duì)象和 URL.createObjectURL：可以將截圖數(shù)據(jù)轉(zhuǎn)換為 Blob 對(duì)象，然后使用 URL.createObjectURL 方法生成一個(gè)臨時(shí)的 URL，將這個(gè) URL 賦值給 <a> 標(biāo)簽的 href 屬性，再設(shè)置 download 屬性為所需的文件名，這樣用戶點(diǎn)擊鏈接時(shí)會(huì)自動(dòng)下載圖片文件。

利用 canvas 的 toDataURL 方法：可以將截圖繪制到一個(gè) canvas 元素上，然后使用 canvas 的 toDataURL 方法將 canvas 中的內(nèi)容轉(zhuǎn)換為 data URL，再創(chuàng)建一個(gè)臨時(shí)的 <a> 標(biāo)簽，將 data URL 賦值給 href 屬性，設(shè)置 download 屬性為所需的文件名，從而實(shí)現(xiàn)下載功能。

利用 Blob 對(duì)象和 URL.createObjectURL

**生成 Blob 對(duì)象：**首先，將截圖數(shù)據(jù)轉(zhuǎn)換為 Blob 對(duì)象。Blob 對(duì)象是用于表示二進(jìn)制數(shù)據(jù)的對(duì)象，可以通過將數(shù)據(jù)傳遞給 Blob 構(gòu)造函數(shù)來創(chuàng)建。在這個(gè)場(chǎng)景中，截圖數(shù)據(jù)通常是 base64 編碼的字符串，需要將其解碼為二進(jìn)制數(shù)據(jù)，然后再轉(zhuǎn)換為 Blob 對(duì)象。

**創(chuàng)建臨時(shí) URL：**使用 URL.createObjectURL 方法生成一個(gè)臨時(shí)的 URL。這個(gè) URL 指向 Blob 對(duì)象的內(nèi)容。生成的 URL 是唯一的，且在頁(yè)面關(guān)閉時(shí)會(huì)被自動(dòng)釋放，因此稱為臨時(shí) URL。

**創(chuàng)建下載鏈接：**將生成的臨時(shí) URL 賦值給 <a> 標(biāo)簽的 href 屬性。同時(shí)，設(shè)置 download 屬性為所需的文件名，這樣用戶點(diǎn)擊鏈接時(shí)會(huì)自動(dòng)下載圖片文件。

利用 canvas 的 toDataURL 方法

**繪制到 canvas：**將截圖數(shù)據(jù)繪制到一個(gè) canvas 元素上。首先，創(chuàng)建一個(gè)新的 canvas 元素，并設(shè)置其大小與所需的截圖大小相同。然后，使用 JavaScript 將截圖數(shù)據(jù)繪制到這個(gè) canvas 上。

**轉(zhuǎn)換為 data URL：**使用 canvas 的 toDataURL 方法將 canvas 中的內(nèi)容轉(zhuǎn)換為 data URL。這個(gè)方法可以將 canvas 中的圖像數(shù)據(jù)轉(zhuǎn)換為 base64 編碼的字符串，表示為一個(gè) URL。

**創(chuàng)建下載鏈接：**將生成的 data URL 賦值給 <a> 標(biāo)簽的 href 屬性，同時(shí)設(shè)置 download 屬性為所需的文件名。用戶點(diǎn)擊鏈接時(shí)會(huì)自動(dòng)下載圖片文件。

微信小程序

如果是微信小程序中，因?yàn)椴皇?html，處理會(huì)有差別。在微信小程序中，要實(shí)現(xiàn)截圖功能，可以使用小程序官方提供的 wx.canvasToTempFilePath 接口。這個(gè)接口可以將 Canvas 中的內(nèi)容轉(zhuǎn)換為臨時(shí)文件路徑，從而實(shí)現(xiàn)截圖功能。

具體步驟如下：

• 創(chuàng)建一個(gè) <canvas> 元素，并將需要截圖的內(nèi)容繪制到這個(gè) Canvas 上。
• 調(diào)用 wx.canvasToTempFilePath 接口將 Canvas 中的內(nèi)容轉(zhuǎn)換為臨時(shí)文件路徑。
• 獲取到臨時(shí)文件路徑后，可以進(jìn)行后續(xù)的操作，例如保存到相冊(cè)、上傳到服務(wù)器等。

Node.js

上面看到現(xiàn)在由于有各種端，不一定支持 html 或者 canvas，并且各個(gè)設(shè)備、端上不能保證完全一致，所以可以在后端直接生成圖片，前端根據(jù)鏈接下載截圖。

在 Node.js 中實(shí)現(xiàn)截圖和截長(zhǎng)圖的功能可以使用 Puppeteer 庫(kù)。Puppeteer 是一個(gè)由 Google 開發(fā)的 Node.js 庫(kù)，它提供了一個(gè)高級(jí) API 來通過 Chromium 或者 Chrome 控制瀏覽器的行為。利用 Puppeteer，可以模擬瀏覽器的行為，并實(shí)現(xiàn)在瀏覽器中進(jìn)行截圖和截長(zhǎng)圖的功能。

在使用 Puppeteer 實(shí)現(xiàn)截圖和截長(zhǎng)圖的過程中，需要注意以下幾點(diǎn)：

• **安裝 Puppeteer：**首先需要安裝 Puppeteer 庫(kù)，可以通過 npm 進(jìn)行安裝：npm install puppeteer。
• **使用 Puppeteer 截圖：**使用 Puppeteer 提供的 API，可以直接在瀏覽器中打開網(wǎng)頁(yè)，并將網(wǎng)頁(yè)內(nèi)容截圖保存為圖片。
• **實(shí)現(xiàn)截長(zhǎng)圖：**要實(shí)現(xiàn)截取長(zhǎng)圖的功能，可以模擬頁(yè)面的滾動(dòng)，并多次截取不同部分的內(nèi)容，然后將截取到的內(nèi)容拼接成一張長(zhǎng)圖。
• **兼容瀏覽器和微信小程序：**Puppeteer 庫(kù)是針對(duì) Node.js 環(huán)境開發(fā)的，不能直接在瀏覽器或者微信小程序中使用。如果要在瀏覽器或者微信小程序中實(shí)現(xiàn)截圖和截長(zhǎng)圖的功能，可以考慮使用前面提到的瀏覽器中截圖的方法或者小程序中截圖的方法。

Puppeteer

在 Puppeteer 中實(shí)現(xiàn)截取長(zhǎng)圖的功能相對(duì)復(fù)雜，因?yàn)?Puppeteer 默認(rèn)只能截取當(dāng)前視口（Viewport）的內(nèi)容，無法直接截取整個(gè)頁(yè)面的內(nèi)容。但可以通過模擬頁(yè)面的滾動(dòng)，并多次截取不同部分的內(nèi)容，然后將截取到的內(nèi)容拼接成一張長(zhǎng)圖來實(shí)現(xiàn)。

以下是一種實(shí)現(xiàn)截取長(zhǎng)圖的方法：

• **設(shè)置視口大?。?*首先，需要設(shè)置頁(yè)面的視口大小，以確?？梢燥@示所有要截取的內(nèi)容?？梢允褂?page.setViewport() 方法設(shè)置頁(yè)面的寬度和高度。
• **模擬頁(yè)面滾動(dòng)：**通過執(zhí)行 JavaScript 代碼來模擬頁(yè)面的滾動(dòng)，以便逐步截取頁(yè)面的不同部分?？梢允褂?page.evaluate() 方法來執(zhí)行 JavaScript 代碼。
• **多次截取內(nèi)容：**在模擬滾動(dòng)的過程中，每次滾動(dòng)一定的距離后，使用 page.screenshot() 方法截取當(dāng)前視口的內(nèi)容，并保存為圖片。
• **拼接截圖：**將截取到的多張圖片拼接成一張長(zhǎng)圖?？梢允褂玫谌綆?kù)來實(shí)現(xiàn)圖片拼接的功能，比如 merge-img。

下面是一個(gè)簡(jiǎn)單的示例代碼，演示如何在 Puppeteer 中實(shí)現(xiàn)截取長(zhǎng)圖的功能：

const puppeteer = require('puppeteer');
const mergeImg = require('merge-img');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setViewport({ width: 1200, height: 800 }); // 設(shè)置頁(yè)面視口大小

  await page.goto('https://example.com'); // 打開頁(yè)面

  const chunks = []; // 存儲(chǔ)截取的圖片數(shù)據(jù)

  const scrollHeight = await page.evaluate(() => {
    // 模擬頁(yè)面滾動(dòng)，返回頁(yè)面的滾動(dòng)高度
    const distance = 800; // 每次滾動(dòng)的距離
    let totalHeight = 0;
    const timer = setInterval(() => {
      window.scrollBy(0, distance);
      totalHeight += distance;
      if (totalHeight >= document.body.scrollHeight) {
        clearInterval(timer);
      }
    }, 100);
    return document.body.scrollHeight;
  });

  for (let i = 0; i < scrollHeight; i += 800) {
    // 每次滾動(dòng)800px，截取當(dāng)前視口的內(nèi)容并保存為圖片
    const screenshot = await page.screenshot({ clip: { x: 0, y: i, width: 1200, height: 800 } });
    chunks.push(screenshot);
  }

  await browser.close();

  // 拼接截取的圖片
  const mergedImg = await mergeImg(chunks, { direction: true });

  // 保存拼接后的長(zhǎng)圖
  await mergedImg.write('long_screenshot.png');
})();

在這個(gè)示例中，我們首先設(shè)置了頁(yè)面的視口大小為 1200x800，然后打開了一個(gè)頁(yè)面，并模擬了頁(yè)面的滾動(dòng)，每次滾動(dòng)800px。在滾動(dòng)過程中，通過多次調(diào)用 page.screenshot() 方法截取當(dāng)前視口的內(nèi)容，并保存為圖片。最后，使用 merge-img 庫(kù)將所有截取到的圖片拼接成一張長(zhǎng)圖，并保存到本地。

需要注意的是，這只是一個(gè)簡(jiǎn)單的示例代碼，實(shí)際場(chǎng)景中可能需要根據(jù)頁(yè)面的具體情況進(jìn)行調(diào)整和優(yōu)化。

到此這篇關(guān)于詳解JavaScript前端如何實(shí)現(xiàn)截屏功能的文章就介紹到這了,更多相關(guān)JavaScript截屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論