SnapDOM 是一个无需依赖的 DOM 转图像捕获库,用于将 HTML 元素转换为可缩放的 SVG 或位图图像格式。它基于标准 Web API,不引入额外依赖,并提供从元素捕获到多格式导出的完整能力。
用途
当需要将 HTML 元素转换为图像、捕获带样式(含伪元素与阴影)的 DOM、导出内嵌字体与图标、生成自定义尺寸或缩放比例的截图、通过代理处理受 CORS 限制的资源、借助插件实现自定义渲染流程,或针对大型复杂元素优化性能时,可以使用 SnapDOM。
主要能力
导出格式方面,SnapDOM 支持 SVG、PNG、JPG、WebP、Canvas 以及 Blob,其中 SVG 为可缩放矢量格式并内嵌全部样式,PNG、JPG、WebP 位图格式可配置质量,Canvas 用于进一步处理,Blob 提供原始二进制数据。
性能方面,小元素捕获约 1.6ms,4000×2000 的大型元素约 171ms,官方说明其在复杂元素上比 html2canvas 快 10 至 40 倍。
样式支持包括内嵌字体(含图标字体)、CSS 伪元素(::before、::after)、CSS 计数器、CSS 行截断、变换与阴影效果,以及 Shadow DOM 内容。
高级能力包括同源 iframe 支持、针对被阻止资源的 CORS 代理回退、用于自定义变换的插件系统、拉直变换(移除 rotate/translate)、选择性排除元素、紧凑边界框计算。
使用方式
安装可通过 NPM 或 Yarn 执行 npm install @zumer/snapdom 或 yarn add @zumer/snapdom,也可通过 CDN 以 ES Module 或 UMD 方式引入。
基本用法是调用 snapdom 捕获元素并获取可复用结果对象,再调用 toPng、toJpg、toSvg、toCanvas、toBlob 导出。也可一步直接导出,例如 snapdom.toPng(element),或使用 snapdom.download(element, 'screenshot.png') 自动下载。捕获时可传入选项控制缩放、尺寸、字体嵌入、排除元素、代理与变换处理等。
常用选项包括 scale(输出缩放)、width、height(自定义输出尺寸)、embedFonts(嵌入非图标 @font-face 规则)、useProxy(启用 CORS 代理,可为 URL 或 true)、exclude(用于隐藏元素的 CSS 选择器)、straighten(移除 translate/rotate 变换)、noShadows(移除阴影效果)。典型模式包括响应式截图(不同 scale)、排除控件或水印、固定尺寸(如社交分享图 1200×630)以及自定义 CORS 代理。插件系统处于测试阶段,可通过 snapdom.plugins 扩展导出器,并支持 beforeSnap、beforeClone、afterClone、beforeRender、beforeExport、afterExport 生命周期钩子。
开发方面,克隆仓库后执行 npm install,构建使用 npm run compile,测试使用 npm test。浏览器支持 Chrome/Edge 90+、Firefox 88+、Safari 14+ 及移动端浏览器(iOS Safari 14+、Chrome Mobile)。
适用场景
适合前端开发中把页面元素导出为图片、生成截图、制作社交分享图、导出含内嵌字体的图表或图形等场景。官方建议优先使用 SVG 导出图表和图形,使用 scale 而非 width/height 以获得更好性能,嵌入自定义字体时设置 embedFonts: true,图像加载失败时启用 useProxy,复杂页面可拆分为更小的捕获块,PNG/JPG 可使用 quality: 0.95 保证质量。
限制
官方资料未提供收费、价格或平台限制等信息。仅列出浏览器支持范围与已知注意事项,例如元素未渲染时需检查尺寸与 CSS 加载情况、字体缺失时需设置 embedFonts 并确保字体已加载、CORS 问题需启用代理或检查同源、性能问题可降低 scale 或启用 noShadows、大型捕获可拆分处理。插件系统标注为 Beta。许可证为 MIT。