JavaScript网页截图导出方案

在开发网页应用时，虽然网页截图导出不是一个高频需求，但偶尔仍会遇到这种情况。本文总结了一些常见的实现方案供大家参考和借鉴。

功能实现：

1. 截图： 首先，需要实现网页截图功能。
2. 导出： 其次，实现截图的导出或下载。

截图实现方案：

方案1: 使用 canvas

• 工具: html2canvas
• 原理: html2canvas 是一个基于 DOM 的 HTML 渲染器，它生成的图片并不一定与实际屏幕截图完全一致。它通过解析 DOM 和 CSS 样式来构建截图。因此，实现上需要处理 DOM、CSS 映射问题，还会受到如跨域资源等限制。

html2canvas官网：https://html2canvas.hertzen.com/

方案2: 使用 SVG

• 工具: dom-to-image
• 原理: 该方案利用 SVG 的  特性，可以在其中包含任意的 HTML 内容。实现步骤包括：
  • 递归克隆原始 DOM 节点。
  • 计算并复制节点及其子节点的样式。
  • 嵌入网页字体，并链接 CSS 样式。
  • 将克隆的节点序列化为 XML，包裹于 <foreignObject> 标签和 SVG 中，生成数据 URL。
  • 创建以 SVG 为源的图像元素，绘制到离屏画布上，再从画布读取内容。

dom-to-image官网：https://github.com/tsayen/dom-to-image

这一方案与 canvas 类似，都需要处理 DOM、CSS 和其他资源，但后续的渲染工作交由浏览器处理，减轻了一些工作量。