最近发现一款简单好用、功能强大的前端截图开发工具库SnapDOM，现在可以彻底抛弃html2canvas了。
SnapDOM
SnapDOM是一款性能优越的网页截图工具，能够快速准确地将网页元素转换成多种图片格式，包括SVG、PNG、JPG、WebP以及Canvas元素。它支持复杂元素的截图，如CSS样式、伪元素、Shadow DOM等，并且能够高度还原网页的视觉效果。
技术特性
- 零依赖：轻量化（约8KB），纯原生 JavaScript 实现。
- 渲染速度超快：全屏截图耗时仅0.8秒（比 html2canvas 快8倍）；
- 像素级还原：可以精准渲染复杂样式（渐变、阴影、SVG）和动态加载内容（比如懒加载图片、异步数据等）；
与 html2canvas和 dom-to-image相比，SnapDOM在速度和还原度上都有显著优势，尤其在处理大型元素时速度可达到html2canvas的93倍以上。
将复杂DOM结构分解为可复用的矢量层和像素层，通过SVG转换和Canvas渲染分离，将处理时间从全量克隆模式缩短至分层处理模式
对比
| 对比项 | SnapDOM | html2canvas |
|---|---|---|
| 截图速度 | ✅ 超快 | ❌ 慢 |
| 高分辨率支持 | ✅ 高清无模糊，甚至支持矢量 | ❌ 缩放易失真 |
| 滚动截图 | ✅ 自动拼接长图 | ❌ 需手动截取 |
| GPU加速 | ✅ 异步渲染 | ❌ 阻塞主线程 |
| CSS 支持 | ✅ 绝大部分都支持 | ❌ 大部分不支持 |
| 跨域资源 | ✅ 完美支持 | ⚠️ 部分会失效 |
使用
安装
npm i @zumer/snapdom简单截图实现
import { snapdom } from '@zumer/snapdom';
const el = document.querySelector('#target');
const res = await snapdom(el);
// 下载图片为指定格式
await res.download({ format: 'jpg', filename: '截图.jpg' });注意事项
SnapDOM 各方面都很强，是新一代的网页截图库，完全可以在生产上使用，不过需要注意一下几点：
- 图片跨域：有外部图片，需要得确保这些资源支持
CORS，否则会截图失败； - iframe 限制：浏览器的安全限制，
SnapDOM不能截iframe里的内容； - 长页面截图：建议分块去截超长页面，否则可能会导致内存溢出。