html2canvas

核心定位

html2canvas 是一个开源的 JavaScript 库，核心功能是将网页中的 DOM 元素或整个页面渲染为 Canvas 位图。它不依赖任何第三方服务，所有处理均在浏览器端完成。对于需要在前端生成页面截图、海报或特定区域图像的场景，这是一个常用的技术方案。

工作原理简述

html2canvas 并非通过操作系统级的屏幕捕获来实现截图。它的处理方式是遍历目标 DOM 树，读取每个节点的样式属性、布局信息和内容，然后在 Canvas 上重新绘制一份视觉近似的结果。这一过程本质上是对浏览器渲染行为的软件模拟。

由于是模拟而非原生截取，输出结果与浏览器实际显示之间可能存在细微差异。某些 CSS 特性——尤其是涉及跨域资源、部分滤镜效果或复杂的阴影叠加——可能无法被完整还原。官方文档对此有明确说明，使用时应当了解这一限制。

主要特性

典型应用场景

• 生成分享卡片：将页面中的特定区域（如成绩单、数据面板）渲染为图片供用户保存
• 前端预览导出：在无需服务端参与的情况下，将可视化图表或表单内容导出为 PNG
• 设计稿标注工具：把网页局部截取为图像，用于后续批注或比对
• 动态海报合成：结合用户输入数据，实时生成可下载的定制图片

使用要点

调用方式相对直接：

html2canvas(document.querySelector('#target'), {
  scale: 2,
  backgroundColor: '#ffffff',
  useCORS: true
}).then(canvas => {
  const imgData = canvas.toDataURL('image/png');
  // 后续处理：展示、下载或上传
});

实际使用中，以下因素对输出质量影响较大：

1. 跨域图片：目标区域内的外部图片需配置 useCORS，且图片服务器需返回正确的 CORS 响应头，否则渲染会失败或留白
2. Web 字体：字体加载完成的时机需要控制，建议在 document.fonts.ready 之后执行截图
3. Canvas 尺寸上限：部分浏览器对 Canvas 面积有硬性限制，超大页面的截取需要分段处理或降低 scale 值
4. 性能消耗：遍历 DOM 并重绘的计算成本不低，频繁调用可能造成页面卡顿，建议对触发频率做节流

替代方案提示

对于要求像素级精确或需要完整还原现代 CSS 特性的场景，html2canvas 可能不是最优选择。同类方案中，dom-to-image 基于 SVG 序列化，对部分 CSS 的支持略好；而 Puppeteer 或 Playwright 等无头浏览器方案能提供真实的浏览器渲染截图，代价是需要服务端环境。选择时需根据项目的部署条件和精度要求权衡。