前端截圖幾種常用實現(xiàn)方式總結(jié)

更新時間：2025年03月14日 10:59:26 作者：vvw&

這篇文章主要介紹了前端截圖幾種常用實現(xiàn)方式,包括使用HTML5的canvas和html2canvas庫、瀏覽器API以及結(jié)合后端服務,每種方法都有其優(yōu)缺點,大家可以根據(jù)需求選擇方法,需要的朋友可以參考下

方法一：使用 HTML5 的 canvas 和 html2canvas 庫

這是最常見的方式，用于將 HTML 內(nèi)容渲染到 canvas，然后生成圖片。html2canvas 是一個非常流行的庫，可以輕松實現(xiàn)網(wǎng)頁元素的截圖。

優(yōu)點：

簡單易用，支持大部分瀏覽器。
能直接截取 DOM 元素并生成圖像。

缺點：

不支持跨域的資源（如圖片、字體等），需要設(shè)置 crossOrigin 屬性。
對 CSS 樣式的兼容性有限，某些復雜樣式可能無法完整渲染。

示例代碼：

// 安裝 html2canvas 庫
// npm install html2canvas

import html2canvas from 'html2canvas';

const takeScreenshot = () => {
  const element = document.getElementById('screenshot-target'); // 目標 DOM 元素
  html2canvas(element).then((canvas) => {
    // 將 canvas 轉(zhuǎn)為圖片鏈接
    const image = canvas.toDataURL('image/png');
    // 創(chuàng)建一個下載鏈接
    const link = document.createElement('a');
    link.href = image;
    link.download = 'screenshot.png';
    link.click();
  });
};

應用場景：

截取特定頁面區(qū)域的內(nèi)容，例如表單或圖片展示頁面。
生成用戶可下載的頁面截圖。

方法二：使用瀏覽器 API

現(xiàn)代瀏覽器支持 MediaDevices.getDisplayMedia API，能捕獲屏幕、窗口或瀏覽器選定區(qū)域的截圖。

優(yōu)點：

能捕獲整個屏幕，甚至包括瀏覽器窗口以外的內(nèi)容。
支持錄屏和實時捕獲。

缺點：

需要用戶授權(quán)，無法完全自動化。
不適合對指定 DOM 元素截圖。

示例代碼：

const captureScreen = async () => {
  try {
    // 請求屏幕捕獲權(quán)限
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: { cursor: 'always' },
    });

    const video = document.createElement('video');
    video.srcObject = stream;
    video.play();

    video.onloadedmetadata = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;

      // 繪制當前視頻幀到 canvas
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

      // 生成圖片
      const image = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.href = image;
      link.download = 'screen-capture.png';
      link.click();

      // 停止流
      stream.getTracks().forEach((track) => track.stop());
    };
  } catch (error) {
    console.error('Screen capture failed:', error);
  }
};

應用場景：

截取整個屏幕或特定窗口的內(nèi)容。
實現(xiàn)錄屏功能。

方法三：結(jié)合后端服務生成截圖

前端通過 API 調(diào)用后端服務，將頁面內(nèi)容渲染成圖片。常見的技術(shù)有 Puppeteer 或 Playwright。

優(yōu)點：

后端渲染，避免跨域問題。
支持復雜的 CSS 和動態(tài)內(nèi)容。

缺點：

需要額外的后端支持。
實時性較差，不適合高交互需求的場景。

示例代碼：

后端（Node.js）代碼：

const puppeteer = require('puppeteer');

const takeScreenshot = async (url) => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  await page.screenshot({ path: 'screenshot.png' });
  await browser.close();
};

takeScreenshot('<https://example.com>');

前端調(diào)用：

const takeScreenshot = async () => {
  const response = await fetch('/api/screenshot', {
    method: 'POST',
    body: JSON.stringify({ url: window.location.href }),
  });
  const blob = await response.blob();
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'screenshot.png';
  link.click();
};