前端页面截图实现

问题

前端如何实现页面截图？

解答

前端实现页面截图主要有以下几种方式：

1. html2canvas

最常用的前端截图库，通过遍历 DOM 节点并绘制到 Canvas 实现。

import html2canvas from 'html2canvas';

// 截取整个页面
html2canvas(document.body).then(canvas => {
  const image = canvas.toDataURL('image/png');
  // 下载图片
  const link = document.createElement('a');
  link.download = 'screenshot.png';
  link.href = image;
  link.click();
});

// 截取指定元素
const element = document.querySelector('#target');
html2canvas(element, {
  backgroundColor: '#ffffff',
  scale: 2, // 提高清晰度
  useCORS: true // 允许跨域图片
}).then(canvas => {
  document.body.appendChild(canvas);
});

2. dom-to-image

另一个流行的截图库，支持多种导出格式。

import domtoimage from 'dom-to-image';

const node = document.getElementById('target');

// 导出为 PNG
domtoimage.toPng(node)
  .then(dataUrl => {
    const img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  });

// 导出为 JPEG
domtoimage.toJpeg(node, { quality: 0.95 })
  .then(dataUrl => {
    // 处理图片
  });

// 导出为 Blob
domtoimage.toBlob(node)
  .then(blob => {
    // 上传到服务器
  });

3. Canvas API 手动绘制

适合简单场景，需要手动处理 DOM 元素。

function captureElement(element) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const rect = element.getBoundingClientRect();
  
  canvas.width = rect.width;
  canvas.height = rect.height;
  
  // 绘制背景
  ctx.fillStyle = window.getComputedStyle(element).backgroundColor;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // 绘制文本等内容（需要逐个处理）
  ctx.fillStyle = '#000';
  ctx.font = '16px Arial';
  ctx.fillText(element.textContent, 10, 30);
  
  return canvas.toDataURL();
}

4. 服务端截图（Puppeteer）

适合需要高质量截图或复杂页面的场景。

// Node.js 服务端代码
const puppeteer = require('puppeteer');

async function screenshot(url) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto(url, { waitUntil: 'networkidle2' });
  await page.setViewport({ width: 1920, height: 1080 });
  
  const screenshot = await page.screenshot({
    path: 'screenshot.png',
    fullPage: true // 截取整个页面
  });
  
  await browser.close();
  return screenshot;
}

关键点

• html2canvas 和 dom-to-image 是最常用的前端截图方案，无需后端支持
• 跨域图片需要设置 useCORS: true 或使用代理
• 提高 scale 参数可以获得更清晰的截图，但会增加性能开销
• Canvas 手动绘制适合简单场景，复杂布局建议使用成熟库
• Puppeteer 适合服务端截图，支持完整的浏览器渲染能力