在前端開發(fā)中，網(wǎng)頁截圖是個(gè)常用功能。從前，html2canvas 是大家的?？?，但隨著網(wǎng)頁越來越復(fù)雜，它的性能問題也逐漸暴露，速度慢、占資源，用戶體驗(yàn)不盡如人意。
好在，現(xiàn)在有了 SnapDOM，一款性能超棒、還原度超高的截圖新秀，能完美替代 html2canvas，讓截圖不再是麻煩事。
什么是 SnapDOM
SnapDOM 就是一個(gè)專門用來給網(wǎng)頁元素截圖的工具。
它能把 HTML 元素快速又準(zhǔn)確地存成各種圖片格式，像 SVG、PNG、JPG、WebP 等等，還支持導(dǎo)出為 Canvas 元素。
它最厲害的地方在于，能把網(wǎng)頁上的各種復(fù)雜元素，比如 CSS 樣式、偽元素、Shadow DOM、內(nèi)嵌字體、背景圖片，甚至是動(dòng)態(tài)效果的當(dāng)前狀態(tài)，都原原本本地截下來，跟直接看網(wǎng)頁沒啥兩樣。
SnapDOM 優(yōu)勢
快得飛起
測試數(shù)據(jù)顯示，在不同場景下，SnapDOM 都把 html2canvas 和 dom-to-image 這倆老前輩遠(yuǎn)遠(yuǎn)甩在身后。
尤其在超大元素（4000×2000）截圖時(shí)，速度是 html2canvas 的 93.31 倍，比 dom-to-image 快了 133.12 倍。這速度，簡直就像坐火箭。
還原度超高
SnapDOM 截圖出來的效果，跟在網(wǎng)頁上看到的一模一樣。
各種復(fù)雜的 CSS 樣式、偽元素、Shadow DOM、內(nèi)嵌字體、背景圖片，還有動(dòng)態(tài)效果的當(dāng)前狀態(tài)，都能精準(zhǔn)還原。
無論是簡單的元素，還是復(fù)雜的網(wǎng)頁布局，它都能輕松拿捏。
格式任你選
不管你是想要矢量圖 SVG，還是常用的 PNG、JPG，或者現(xiàn)代化的 WebP，又或者是需要進(jìn)一步處理的 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>
直接就能用。
要是項(xiàng)目里用的是 ES Module:
import { snapdom } from '@zumer/snapdom
基礎(chǔ)用法示例
一鍵截圖
const card = document.querySelector('.user-card');
const image = await snapdom.toPng(card);
document.body.appendChild(image);
這段代碼就是找個(gè)元素，然后直接截成 PNG 圖片，再把圖片加到頁面上。簡單粗暴，一步到位。
高級(jí)配置
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'
});
這兒可以對(duì)截圖進(jìn)行各種配置。比如 scale 能調(diào)整清晰度，backgroundColor 能設(shè)置背景色，embedFonts 可以內(nèi)嵌字體，compress 能壓縮優(yōu)化。配置好后，還能把截圖存成不同格式，或者直接下載到本地。
和其他庫比咋樣
和 html2canvas、dom-to-image 比起來，SnapDOM 的優(yōu)勢很明顯：
用的時(shí)候注意點(diǎn)
用 SnapDOM 時(shí)，有幾點(diǎn)得注意：
跨域資源
要是截圖里有外部圖片等跨域資源，得確保這些資源支持 CORS，不然截不出來。
iframe 限制
SnapDOM 不能截 iframe 內(nèi)容，這是瀏覽器的安全限制，沒辦法。
Safari 瀏覽器兼容性
在 Safari 里用 WebP 格式時(shí)，會(huì)自動(dòng)變成 PNG。
大型頁面截圖
截超大頁面時(shí)，建議分塊截，不然可能會(huì)內(nèi)存溢出。
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: '我獲得了新成就！'
});
}
報(bào)表導(dǎo)出
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]}`
});
}
海報(bào)導(dǎo)出
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 就是這么一款簡單、快速、準(zhǔn)確，還零依賴的網(wǎng)頁截圖神器。
無論是社交分享、報(bào)表導(dǎo)出、設(shè)計(jì)保存，還是營銷推廣，它都能輕松搞定。
而且它是免費(fèi)開源的，背后還有活躍的社區(qū)支持。要是你還在為網(wǎng)頁截圖的事兒發(fā)愁，趕緊試試 SnapDOM 吧。
要是你在用 SnapDOM 的過程中有啥疑問，或者碰上啥問題，可以去下面這些地方找答案：
- 項(xiàng)目地址 ：https://github.com/zumerlab/snapdom
- 在線演示 ：https://zumerlab.github.io/snapdom/
- 詳細(xì)文檔 ：https://github.com/zumerlab/snapdom#readme
?轉(zhuǎn)自https://mp.weixin.qq.com/s/t0s5dCOrsuqYyFGf6MpqPA
該文章在 2025/7/9 15:23:23 編輯過
400 186 1886
