快捷導(dǎo)航

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

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

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

方法一：使用 HTML5 的 canvas 和 html2canvas 庫(kù)

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

示例代碼：

// 安裝 html2canvas 庫(kù)
// npm install html2canvas

import html2canvas from 'html2canvas';

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

應(yīng)用場(chǎng)景：

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

方法二：使用瀏覽器 API

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

示例代碼：

const captureScreen = async () => {
  try {
    // 請(qǐng)求屏幕捕獲權(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;

      // 繪制當(dāng)前視頻幀到 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);
  }
};

應(yīng)用場(chǎng)景：

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

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

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

需要額外的后端支持。
實(shí)時(shí)性較差，不適合高交互需求的場(chǎng)景。

示例代碼：

后端（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();
};