棄用 html2canvas！快 93 倍的截圖神器
????? 寫在開頭
點贊 + 收藏 === 學會??????
在前端開發中，網頁截圖是個常用功能。從前，
html2canvas是大家的常客，但隨著網頁越來越復雜，它的性能問題也逐漸暴露，速度慢、占資源，用戶體驗不盡如人意。好在，現在有了 SnapDOM，一款
性能超棒、還原度超高的截圖新秀，能完美替代html2canvas，讓截圖不再是麻煩事。
什么是 SnapDOM
SnapDOM 就是一個專門用來給網頁元素截圖的工具。
它能把
HTML元素快速又準確地存成各種圖片格式，像SVG、PNG、JPG、WebP等等，還支持導出為Canvas元素。
它最厲害的地方在于，能把網頁上的各種復雜元素，比如
CSS樣式、偽元素、Shadow DOM、內嵌字體、背景圖片，甚至是動態效果的當前狀態，都原原本本地截下來，跟直接看網頁沒啥兩樣。
SnapDOM 優勢
快得飛起
測試數據顯示，在不同場景下，
SnapDOM都把html2canvas和dom-to-image這倆老前輩遠遠甩在身后。
尤其在超大元素（4000×2000）截圖時，速度是 html2canvas 的
93.31倍，比 dom-to-image 快了133.12倍。這速度，簡直就像坐火箭。
還原度超高
SnapDOM 截圖出來的效果，跟在網頁上看到的一模一樣。
各種復雜的
CSS樣式、偽元素、Shadow DOM、內嵌字體、背景圖片，還有動態效果的當前狀態，都能精準還原。
無論是簡單的元素，還是復雜的網頁布局，它都能輕松拿捏。
格式任你選
不管你是想要矢量圖
SVG，還是常用的PNG、JPG，或者現代化的WebP，又或者是需要進一步處理的Canvas元素，SnapDOM 都能滿足你。
多種格式，任你挑選，適配各種需求。
三、怎么用 SnapDOM
安裝
SnapDOM 的安裝超簡單，有好幾種方式：
用
NPM或Yarn：在命令行里輸
# npm npm i @zumer/snapdom # yarn yarn add @zumer/snapdom
就能裝好。
用
CDN在HTML文件里加一行:
<script src="https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.min.js"></script>
直接就能用。
要是項目里用的是
ES Module:
import { snapdom } from '@zumer/snapdom
基礎用法示例
一鍵截圖
const card = document.querySelector('.user-card');
const image = await snapdom.toPng(card);
document.body.appendChild(image);
這段代碼就是找個元素，然后直接截成
PNG圖片，再把圖片加到頁面上。簡單粗暴，一步到位。
高級配置
const element = document.querySelector('.chart-container');
const capture = await snapdom(element, {
scale: 2,
backgroundColor: '#fff',
embedFonts: true,
compress: true
});
const png = await capture.toPng();
const jpg = await capture.toJpg({ quality: 0.9 });
await capture.download({
format: 'png',
filename: 'chart-report-2024'
});
這兒可以對截圖進行各種配置。比如
scale能調整清晰度，backgroundColor能設置背景色，embedFonts可以內嵌字體，compress能壓縮優化。配置好后，還能把截圖存成不同格式，或者直接下載到本地。
和其他庫比咋樣
和
html2canvas、dom-to-image比起來，SnapDOM的優勢很明顯：
五、用的時候注意點
用 SnapDOM 時，有幾點得注意：
跨域資源
要是截圖里有外部圖片等跨域資源，得確保這些資源支持 CORS，不然截不出來。
iframe 限制
SnapDOM 不能截 iframe 內容，這是瀏覽器的安全限制，沒辦法。
Safari 瀏覽器兼容性
在 Safari 里用 WebP 格式時，會自動變成 PNG。
大型頁面截圖
截超大頁面時，建議分塊截，不然可能會內存溢出。
六、SnapDOM 能干啥及代碼示例
社交分享
async function shareAchievement() {
const card = document.querySelector('.achievement-card');
const image = await snapdom.toPng(card, { scale: 2 });
navigator.share({
files: [new File([await snapdom.toBlob(card)], 'achievement.png')],
title: '我獲得了新成就！'
});
}
報表導出
async function exportReport() {
const reportSection = document.querySelector('.report-section');
await preCache(reportSection);
await snapdom.download(reportSection, {
format: 'png',
scale: 2,
filename: `report-${new Date().toISOString().split('T')[0]}`
});
}
海報導出
async function generatePoster(productData) {
document.querySelector('.poster-title').textContent = productData.name;
document.querySelector('.poster-price').textContent = `￥${productData.price}`;
document.querySelector('.poster-image').src = productData.image;
await new Promise((resolve) => setTimeout(resolve, 100));
const poster = document.querySelector('.poster-container');
const blob = await snapdom.toBlob(poster, { scale: 3 });
return blob;
}
寫在最后
SnapDOM 就是這么一款簡單、快速、準確，還零依賴的網頁截圖神器。
無論是社交分享、報表導出、設計保存，還是營銷推廣，它都能輕松搞定。
而且它是免費開源的，背后還有活躍的社區支持。要是你還在為網頁截圖的事兒發愁，趕緊試試 SnapDOM 吧。
要是你在用
SnapDOM的過程中有啥疑問，或者碰上啥問題，可以去下面這些地方找答案：
- 項目地址 ：github.com/zumerlab/sn…
- 在線演示 ：zumerlab.github.io/snapdom/
- 詳細文檔 ：github.com/zumerlab/sn…
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
浙公網安備 33010602011771號