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

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

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

snapDOM 正是為了解決這些痛點(diǎn)而生——它來(lái)自 Zumly 團(tuán)隊(duì)，是一個(gè) 100 % 純 Web API、零依賴、極致性能 的 DOM-to-Image 庫(kù)。

它到底能做什么？

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

一分鐘上手

安裝

# 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';

最簡(jiǎn)用法

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

// 一句到位：拿到 PNG 節(jié)點(diǎn)并掛到頁(yè)面
const imgEl = await snapdom.toPng(target);
document.body.appendChild(imgEl);

復(fù)用導(dǎo)出

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

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

snapdom() 返回的對(duì)象還能：

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

常用選項(xiàng)

{
  compress: true,        // 精簡(jiǎn)多余樣式
embedFonts: false,     // 是否內(nèi)聯(lián)字體（圖標(biāo)字體默認(rèn)強(qiáng)制）
scale: 1,              // 整體縮放倍率
width: 400,            // 指定輸出寬度（保持比例）
height: 200,           // 指定輸出高度（保持比例）
backgroundColor: '#fff',
quality: 0.9,          // JPG / WebP 質(zhì)量
useProxy: 'https://corsproxy.io/?url='// CORS 兜底
}

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

性能加速技巧

1. 資源預(yù)加載

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

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

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

2. 按需過(guò)濾

排除無(wú)關(guān)節(jié)點(diǎn)，進(jìn)一步壓縮執(zhí)行時(shí)間：

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

何時(shí)不適合用？

• ? 需要截圖 <iframe> 時(shí)（暫不支持）。
• ? Safari 嚴(yán)格要求 WebP，而你必須用 WebP 格式，這會(huì)被自動(dòng)降級(jí)成 PNG——介意的話請(qǐng)手動(dòng)改用其他格式。

貢獻(xiàn) & 本地開(kāi)發(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 

動(dòng)手試試，給你的截圖體驗(yàn)提個(gè)速吧 ??

?