告别 html2canvas？SnapDOM 是你更好的选择！

📸 SnapDOM 是一个用于将 DOM 元素截图并转换为图片（如 PNG、JPEG）的 JavaScript 工具库。它基于 html2canvas 的核心思想，但进行了优化与封装，使得使用更加简单高效，适用于网页截图、报表导出、分享截图等场景。

🧰 1. 安装 SnapDOM

使用 npm 安装（推荐）

npm install snapdom

或通过 CDN 引入

<script src="https://cdn.jsdelivr.net/npm/snapdom/dist/snapdom.min.js"></script>

🚀 2. 基本用法

示例：将某个元素截图并显示为图片

<div id="screenshot-target" style="width: 300px; height: 200px; background: #f0f0f0; border: 1px solid #ccc;">
    <h2>Hello, SnapDOM!</h2>
</div>
<button onclick="takeScreenshot()">截图</button>
<img id="preview"/>
<script>
    async function takeScreenshot() {
        const element = document.getElementById('screenshot-target');
        const image = await SnapDOM(element);
        document.getElementById('preview').src = image;
    }
</script>

⚙️ 3. 配置选项

SnapDOM 支持多种配置参数，以满足不同需求：

SnapDOM(element, options).then(imageUrl => {
  // ...
});

参数名	类型	默认值	描述
`type`	string	`'png'`	输出类型，支持`'png'` /`'jpeg'`/`'jpg'`
`quality`	number	`1`	图片质量，仅对 jpeg/jpg 生效，范围 [0, 1]
`backgroundColor`	string	`null`	设置背景颜色（覆盖 CSS 中的背景）
`scale`	number	`window.devicePixelRatio`	渲染缩放比例，影响清晰度
`ignoreElements`	function	可选	返回 true 的元素将不会被渲染
`onClone`	function	可选	在克隆 DOM 后调用，可进行修改

示例：设置背景色和输出格式

SnapDOM(document.getElementById('screenshot-target'), {
  type: 'jpeg',
  quality: 0.8,
  backgroundColor: '#ffffff'
}).then(dataUrl => {
  console.log('截图完成:', dataUrl);
});

🖼️ 4. 获取 Blob / Base64 / Canvas 对象

默认返回的是 Data URL（data:image/png;base64,...），你也可以获取原始数据对象：

获取 Blob

const blob = await SnapDOM.toBlob(element, options);

获取 Base64 字符串

const base64 = await SnapDOM.toDataURL(element, options);

获取 Canvas 元素

const canvas = await SnapDOM.toCanvas(element, options);
document.body.appendChild(canvas);

📥 5. 下载截图文件

你可以轻松地将截图保存为本地文件：

async function downloadScreenshot() {
  const element = document.getElementById('screenshot-target');
  const dataUrl = await SnapDOM(element, { type: 'png' });

  const a = document.createElement('a');
  a.href = dataUrl;
  a.download = 'screenshot.png';
  a.click();
}

💡 6. 注意事项

跨域图片问题：如果截图区域包含外部图片资源，请确保这些资源启用了 CORS。
性能优化：大页面截图可能会影响性能，建议只截取可视区域或分块处理。
CSS 样式限制：某些高级 CSS 特性（如 filter、mask）可能无法完美还原。
移动端兼容性：部分旧设备可能不支持高分辨率截图。

🧪 7. 高级用法示例

忽略特定元素

SnapDOM(element, {
  ignoreElements: el => el.classList.contains('no-screenshot')
});

修改克隆后的 DOM

SnapDOM(element, {
  onClone: (clonedDoc) => {
    const watermark = clonedDoc.createElement('div');
    watermark.textContent = 'Sample Watermark';
    watermark.style.position = 'absolute';
    watermark.style.top = '10px';
    watermark.style.right = '10px';
    clonedDoc.body.appendChild(watermark);
  }
});

📦 8. 构建与打包（开发者可选）

如果你想要自定义构建 SnapDOM，可以克隆源码并自行编译：

git clone https://github.com/yourname/snapdom.git 
cd snapdom
npm install
npm run build

📚 9. 相关链接

GitHub 仓库：https://github.com/yourname/snapdom
在线演示：https://zumerlab.github.io/snapdom/
详细文档：https://github.com/zumerlab/snapdom#readme

🤝 10. 结语

SnapDOM 提供了简洁易用的 API 来实现网页截图功能，无论是开发 Web 应用还是制作可视化工具都非常实用。希望这篇教程能帮助你快速上手，并将其应用到实际项目中！