天下苦html2canvas久矣，終于可以好好截個dom圖了

前端項目里，把任意 HTML 片段變成可下載的圖片 往往是一件麻煩事：樣式丟失、字體跑偏、跨域圖片報錯、性能拖慢頁面……

html2canvas太卡了，而且各種bug，又不更新，實在用的難受。

snapDOM 正是為了解決這些痛點而生——它來自 Zumly 團隊，是一個 100 % 純 Web API、零依賴、極致性能 的 DOM-to-Image 庫。

它到底能做什么？

• ? 全量捕獲
  不管是普通元素、偽元素（::before / ::after / ::first-letter）、還是 Shadow DOM / Web Component，統(tǒng)統(tǒng)能打包進最終圖片。
• ? 多格式輸出
  默認生成 SVG，一行代碼就能轉成 PNG / JPG / WebP / Canvas，甚至直接觸發(fā)下載。
• ? 樣式與資源原樣保留
  內聯(lián)字體、背景圖、Icon Font，視覺完全一致。
• ? 跨域圖片兜底支持
  自帶 crossOrigin，再配合 useProxy，解決 CORS。
• ? 飛快
  從 v1.8.0 以來速度翻倍，復雜大頁面也能在毫秒級完成截圖。官方基準測試里，相比 html2canvas 快了一個數(shù)量級。
• 
  
  
  

一分鐘上手

安裝

# 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 節(jié)點并掛到頁面
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,     // 是否內聯(lián)字體（圖標字體默認強制）
scale: 1,              // 整體縮放倍率
width: 400,            // 指定輸出寬度（保持比例）
height: 200,           // 指定輸出高度（保持比例）
backgroundColor: '#fff',
quality: 0.9,          // JPG / WebP 質量
useProxy: 'https://corsproxy.io/?url='// CORS 兜底
}

Tip：同時設置 scale 與 width / height 時，scale 優(yōu)先生效。

性能加速技巧

1. 資源預加載

頁面復雜或圖片眾多時，先執(zhí)行一次：

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

await preCache(document.body); // 預熱所有外鏈資源

2. 按需過濾

排除無關節(jié)點，進一步壓縮執(zhí)行時間：

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

何時不適合用？

• ? 需要截圖 <iframe> 時（暫不支持）。
• ? Safari 嚴格要求 WebP，而你必須用 WebP 格式，這會被自動降級成 PNG——介意的話請手動改用其他格式。

貢獻 & 本地開發(fā)

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 

動手試試，給你的截圖體驗提個速吧 ??

?