SnapDOM翻译站点

核心定位

SnapDOM 是一个面向浏览器端的 DOM 捕获工具，解决的核心问题是：将网页中任意 DOM 元素转换为高质量图像文件。与常规截图工具不同，它直接解析 DOM 结构本身，而非对屏幕像素进行采样。

支持的输出格式

关键技术能力

字体嵌入

Web 字体（如 Google Fonts、自定义 @font-face 字体）会被内嵌进输出文件。对于 SVG 格式，字体以 base64 编码的 data URI 形式写入；对于位图格式，字体在渲染前完成加载，确保文字不出现回退或错位。

伪元素支持

::before 和 ::after 伪元素会被完整捕获。工具会读取伪元素的计算样式，包括 content 属性、定位、颜色、背景等，并将其渲染到输出结果中。这一能力在同类工具中并不普遍。

Shadow DOM 穿透

对于使用 Shadow DOM 封装的组件（如 Web Components），SnapDOM 会递归遍历 shadow root，将内部结构一并捕获。这意味着基于自定义元素的 UI 库（如某些设计系统组件）可以完整导出。

工作方式

SnapDOM 通过遍历目标元素的 DOM 树，收集每个节点的计算样式，然后重建渲染结果。这个过程不依赖屏幕截图 API，因此可以：

• 捕获视口之外的完整元素（无需滚动拼接）
• 输出与设备像素比无关的固定尺寸结果
• 在无头浏览器环境中运行

典型使用场景

• 文档生成：将图表、表格或代码块导出为图片嵌入报告
• 设计交付：从实时页面提取组件视觉稿
• 自动化测试：在 CI 中生成 UI 快照用于回归对比
• 用户功能：为 Web 应用提供“导出为图片”按钮

接入方式

项目托管于 GitHub Pages，源码公开。可直接通过 URL 访问在线工具，也可作为库集成到现有项目中。具体 API 与使用参数需参考项目文档。