前端如何实现截图

一. 使用 html2canvas 库（纯前端方案）
适用场景：将网页中的某个 DOM 元素（如 div、canvas 等）转换为图片并下载。
优点：纯前端实现，无需后端支持。
缺点：对复杂 CSS 样式（如 filter、transform）支持有限，跨域图片可能有问题。

实现步骤

1. 安装 html2canvas

// 通过 npm 安装（推荐）
npm install html2canvas

// 或者通过 CDN 引入（适合非模块化项目）
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

2. 核心截图函数

// 导入库（如果是模块化项目）
import html2canvas from 'html2canvas';

/**
 * 截取指定 DOM 元素并下载为图片
 * @param {string} elementId - 需要截图的 DOM 元素 ID
 * @param {string} fileName - 下载的图片文件名（默认 'screenshot.png'）
 */
async function captureElement(elementId, fileName = 'screenshot.png') {
  // 1. 获取目标 DOM 元素
  const element = document.getElementById(elementId);
  if (!element) {
    console.error('未找到元素:', elementId);
    return;
  }

  try {
    // 2. 使用 html2canvas 将 DOM 转换为 Canvas
    const canvas = await html2canvas(element, {
      scale: 2,            // 缩放比例（提高分辨率）
      logging: false,       // 关闭控制台日志
      useCORS: true,        // 允许加载跨域图片（如 CDN 资源）
      backgroundColor: '#fff', // 设置背景色（默认透明）
    });

    // 3. 将 Canvas 转换为 Base64 格式的图片数据
    const imageData = canvas.toDataURL('image/png');

    // 4. 创建下载链接
    const link = document.createElement('a');
    link.href = imageData;   // 设置图片数据为链接地址
    link.download = fileName; // 设置下载文件名
    link.style.display = 'none'; // 隐藏链接元素

    // 5. 触发下载
    document.body.appendChild(link); // 将链接添加到 DOM
    link.click();                   // 模拟点击下载
    document.body.removeChild(link); // 下载后移除链接

  } catch (error) {
    console.error('截图失败:', error);
  }
}

2. 调用函数

// 示例：截取 id="capture-area" 的元素
captureElement('capture-area');

二，使用第三方服务（如 Puppeteer + 后端）
适用场景：需要服务端渲染或处理复杂页面。
优点：支持无头浏览器截图，兼容性极佳。
缺点：需后端配合，不适合纯前端项目。

示例（Node.js + Puppeteer）

const puppeteer = require('puppeteer');

async function takeScreenshot(url, outputPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  await page.screenshot({ path: outputPath });
  await browser.close();
}

takeScreenshot('https://example.com', 'screenshot.png');

三，移动端适配（React Native / 微信小程序）

React Native

import { captureRef } from 'react-native-view-shot';

const screenshotRef = useRef();

const takeScreenshot = async () => {
  try {
    const uri = await captureRef(screenshotRef, {
      format: 'png',
      quality: 0.8,
    });
    console.log('截图保存路径:', uri);
  } catch (error) {
    console.error('截图失败:', error);
  }
};

四，微信小程序

// 使用 wx.canvasToTempFilePath
wx.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success(res) {
    wx.saveImageToPhotosAlbum({
      filePath: res.tempFilePath,
    });
  },
});