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

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

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

利用 Blob 對象和 URL.createObjectURL

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

**創(chuàng)建臨時 URL：**使用 URL.createObjectURL 方法生成一個臨時的 URL。這個 URL 指向 Blob 對象的內容。生成的 URL 是唯一的，且在頁面關閉時會被自動釋放，因此稱為臨時 URL。

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

利用 canvas 的 toDataURL 方法

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

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

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

微信小程序

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

具體步驟如下：

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

Node.js

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

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

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

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

Puppeteer

在 Puppeteer 中實現(xiàn)截取長圖的功能相對復雜，因為 Puppeteer 默認只能截取當前視口（Viewport）的內容，無法直接截取整個頁面的內容。但可以通過模擬頁面的滾動，并多次截取不同部分的內容，然后將截取到的內容拼接成一張長圖來實現(xiàn)。

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

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

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

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 }); // 設置頁面視口大小

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

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

  const scrollHeight = await page.evaluate(() => {
    // 模擬頁面滾動，返回頁面的滾動高度
    const distance = 800; // 每次滾動的距離
    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) {
    // 每次滾動800px，截取當前視口的內容并保存為圖片
    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 });

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

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

需要注意的是，這只是一個簡單的示例代碼，實際場景中可能需要根據(jù)頁面的具體情況進行調整和優(yōu)化。

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

最新評論