一款免费开源的JavaScript网页截图/海报生成工具库——SnapDOM

SnapDOM是一个高性能的HTML元素截图库，旨在提供比html2canvas更快速、更准确的HTML元素到图像的转换功能。它支持伪元素、Shadow DOM、Web字体等多种复杂特性，能够以极高的速度和准确性捕获HTML元素并将其转换为图像。

SnapDOM功能特点：

1、高性能捕获：

• 快速渲染：SnapDOM以极高的速度捕获HTML元素，显著优于html2canvas。
• 多次捕获测试：在基准测试中，SnapDOM捕获同一DOM元素的速度比html2canvas快数倍。

2、支持复杂特性：

• 伪元素支持：能够正确处理伪元素（如`::before`和`::after`）。
• Shadow DOM支持：支持捕获Shadow DOM内容，确保捕获的图像包含所有内部元素。
• Web字体支持：支持Web字体，确保文本内容的字体显示正确。
• 混合模式支持：支持CSS混合模式（如`mix-blend-mode`），确保捕获的图像包含所有视觉效果。

3、多种导出格式：

• 多种格式：支持导出为PNG、JPG和WebP格式，满足不同用户的需求。
• 灵活选择：用户可以根据需要选择不同的导出格式，方便在不同场景下使用。

4、全页面捕获：

• 完整页面：支持捕获整个页面的内容，而不仅仅是单个元素。
• 滚动页面：能够处理滚动页面的内容，确保捕获的图像包含所有可见部分。

5、动态内容支持：

• 动画和过渡：支持捕获动态内容，如动画和过渡效果。
• 实时更新：能够捕获实时更新的内容，确保捕获的图像反映最新的状态。

6、用户友好界面：

• 简洁界面：提供简洁明了的用户界面，操作方便。
• 交互式设计：用户可以通过简单的操作完成复杂的捕获任务。

7、基准测试：

• 性能对比：提供详细的基准测试，对比SnapDOM和html2canvas的性能。
• 实际应用：通过实际应用示例，展示SnapDOM在不同场景下的表现。

SnapDOM和html2canvas对比：

SnapDOM轻松上手：

脚手架安装

npm i @zumer/snapdom

实现代码操作

import { snapdom } from '@zumer/snapdom';
const el = document.querySelector('#content');
// 以2倍图大小截图
const res = await snapdom(el, { scale: 2 });
// 将截图显示在网页
const img = await res.toPng();
document.body.appendChild(img);
// 下载图片为指定格式
await res.download({ format: 'jpg', filename: '截图.jpg' });

进入SnapDOM工具库官网入口