天下苦html2canvas久矣，终于可以好好截个dom图了

前端项目里，把任意 HTML 片段变成可下载的图片 往往是一件麻烦事：样式丢失、字体跑偏、跨域图片报错、性能拖慢页面……

html2canvas太卡了，而且各种bug，又不更新，实在用的难受。

snapDOM 正是为了解决这些痛点而生——它来自 Zumly 团队，是一个 100 % 纯 Web API、零依赖、极致性能 的 DOM-to-Image 库。

它到底能做什么？

• • 全量捕获
  不管是普通元素、伪元素（::before / ::after / ::first-letter）、还是 Shadow DOM / Web Component，统统能打包进最终图片。
• • 多格式输出
  默认生成 SVG，一行代码就能转成 PNG / JPG / WebP / Canvas，甚至直接触发下载。
• • 样式与资源原样保留
  内联字体、背景图、Icon Font，视觉完全一致。
• • 跨域图片兜底支持
  自带 crossOrigin，再配合 useProxy，解决 CORS。
• • 飞快
  从 v1.8.0 以来速度翻倍，复杂大页面也能在毫秒级完成截图。官方基准测试里，相比 html2canvas 快了一个数量级。
• 
  
  
  

一分钟上手

安装

# NPM
npm i @zumer/snapdom

# 或者 Yarn
yarn add @zumer/snapdom

CDN 用户直接引入：

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

ESM 写法：

import { snapdom } from 'https://cdn.jsdelivr.net/npm/@zumer/snapdom/dist/snapdom.mjs';

最简用法

const target = document.querySelector('#capture-me');

// 一句到位：拿到 PNG 节点并挂到页面
const imgEl = await snapdom.toPng(target);
document.body.appendChild(imgEl);

复用导出

const capture = await snapdom(target, { scale: 2 }); // 2× 像素

await capture.download({ format: 'jpg', filename: 'my-shot' }); // 下载 JPG

snapdom() 返回的对象还能：

capture.toCanvas();
capture.toBlob();   // 拿纯 SVG Blob
capture.toWebp();   // 生成 WebP

常用选项

{
  compress: true,        // 精简多余样式
embedFonts: false,     // 是否内联字体（图标字体默认强制）
scale: 1,              // 整体缩放倍率
width: 400,            // 指定输出宽度（保持比例）
height: 200,           // 指定输出高度（保持比例）
backgroundColor: '#fff',
quality: 0.9,          // JPG / WebP 质量
useProxy: 'https://corsproxy.io/?url='// CORS 兜底
}

Tip：同时设置 scale 与 width / height 时，scale 优先生效。

性能加速技巧

1. 资源预加载

页面复杂或图片众多时，先执行一次：

import { preCache } from '@zumer/snapdom';

await preCache(document.body); // 预热所有外链资源

2. 按需过滤

排除无关节点，进一步压缩执行时间：

snapdom(target, {
  exclude: ['.debug-banner', '.ad-slot']
});

何时不适合用？

• • 需要截图 <iframe> 时（暂不支持）。
• • Safari 严格要求 WebP，而你必须用 WebP 格式，这会被自动降级成 PNG——介意的话请手动改用其他格式。

贡献 & 本地开发

git clone https://github.com/zumerlab/snapdom.git
cd snapdom
npm install
npm run compile      # 打包 ESM / CJS / UMD
npm test             # Vitest + Playwright
npm run test:benchmark

欢迎提 PR！

资源链接

资源包自取吧兄弟们：

https://pan.xunlei.com/s/VOVfyTKY-9Ph8l8wQPRb27ukA1 

动手试试，给你的截图体验提个速吧 🚀

​