在前端開發(fā)中，網(wǎng)頁截圖是個常用功能。從前，html2canvas 是大家的常客，但隨著網(wǎng)頁越來越復(fù)雜，它的性能問題也逐漸暴露，速度慢、占資源，用戶體驗不盡如人意。

好在，現(xiàn)在有了 SnapDOM，一款性能超棒、還原度超高的截圖新秀，能完美替代 html2canvas，讓截圖不再是麻煩事。

一、什么是 SnapDOM

SnapDOM 就是一個專門用來給網(wǎng)頁元素截圖的工具。

它能把 HTML 元素快速又準確地存成各種圖片格式，像 SVG、PNG、JPG、WebP 等等，還支持導(dǎo)出為 Canvas 元素。

它最厲害的地方在于，能把網(wǎng)頁上的各種復(fù)雜元素，比如 CSS 樣式、偽元素、Shadow DOM、內(nèi)嵌字體、背景圖片，甚至是動態(tài)效果的當前狀態(tài)，都原原本本地截下來，跟直接看網(wǎng)頁沒啥兩樣。

二、SnapDOM 優(yōu)勢

1. 快得飛起

測試數(shù)據(jù)顯示，在不同場景下，SnapDOM 都把 html2canvas 和 dom-to-image 這倆老前輩遠遠甩在身后。

尤其在超大元素（4000×2000）截圖時，速度是 html2canvas 的 93.31 倍，比 dom-to-image 快了 133.12 倍。這速度，簡直就像坐火箭。

2. 還原度超高

SnapDOM 截圖出來的效果，跟在網(wǎng)頁上看到的一模一樣。

各種復(fù)雜的 CSS 樣式、偽元素、Shadow DOM、內(nèi)嵌字體、背景圖片，還有動態(tài)效果的當前狀態(tài)，都能精準還原。

無論是簡單的元素，還是復(fù)雜的網(wǎng)頁布局，它都能輕松拿捏。

3. 格式任你選

不管你是想要矢量圖 SVG，還是常用的 PNG、JPG，或者現(xiàn)代化的 WebP，又或者是需要進一步處理的 Canvas 元素，SnapDOM 都能滿足你。

多種格式，任你挑選，適配各種需求。

三、怎么用 SnapDOM

1. 安裝

SnapDOM 的安裝超簡單，有好幾種方式：

(1) 用 NPM 或 Yarn：在命令行里輸：

# npm
npm i @zumer/snapdom

# yarn
yarn add @zumer/snapdom

就能裝好。

(2) 用 CDN 在 HTML 文件里加一行:

<script src="https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.min.js"></script>

直接就能用。

(3) 要是項目里用的是 ES Module:

import { snapdom } from '@zumer/snapdom

2. 基礎(chǔ)用法示例

(1) 一鍵截圖

const card = document.querySelector('.user-card');
const image = await snapdom.toPng(card);
document.body.appendChild(image);

這段代碼就是找個元素，然后直接截成 PNG 圖片，再把圖片加到頁面上。簡單粗暴，一步到位。

(2) 高級配置

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 能調(diào)整清晰度，backgroundColor 能設(shè)置背景色，embedFonts 可以內(nèi)嵌字體，compress 能壓縮優(yōu)化。配置好后，還能把截圖存成不同格式，或者直接下載到本地。

四、和其他庫比咋樣

和 html2canvas、dom-to-image 比起來，SnapDOM 的優(yōu)勢很明顯：

五、用的時候注意點

用 SnapDOM 時，有幾點得注意：

• 跨域資源：要是截圖里有外部圖片等跨域資源，得確保這些資源支持 CORS，不然截不出來。
• iframe 限制：SnapDOM 不能截 iframe 內(nèi)容，這是瀏覽器的安全限制，沒辦法。
• Safari 瀏覽器兼容性：在 Safari 里用 WebP 格式時，會自動變成 PNG。
• 大型頁面截圖：截超大頁面時，建議分塊截，不然可能會內(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: '我獲得了新成就！'
    });
}

報表導(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]}`
    });
}

海報導(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 就是這么一款簡單、快速、準確，還零依賴的網(wǎng)頁截圖神器。

無論是社交分享、報表導(dǎo)出、設(shè)計保存，還是營銷推廣，它都能輕松搞定。

而且它是免費開源的，背后還有活躍的社區(qū)支持。要是你還在為網(wǎng)頁截圖的事兒發(fā)愁，趕緊試試 SnapDOM 吧。

要是你在用 SnapDOM 的過程中有啥疑問，或者碰上啥問題，可以去下面這些地方找答案：

• 項目地址 ：https://github.com/zumerlab/snapdom
• 在線演示 ：https://zumerlab.github.io/snapdom/
• 詳細文檔 ：https://github.com/zumerlab/snapdom#readme