在前端开发中，网页截图是个常用功能。从前，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>

使用

SnapDOM 的使用也很简单，只需要传入一个 HTML 元素，就能生成对应的图片。

// 用 NPM 或 Yarn 安装的用户
import { snap } from '@zumer/snapdom';

// 用 CDN 的用户
// const { snap } = window.SnapDOM;

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

高级配置：

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	html2canvas	dom-to-image
性能	⭐⭐⭐⭐⭐	⭐⭐	⭐
准确度	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
文件大小	极小	较大	中等
SVG 支持	✅	❌	✅
Shadow DOM 支持	✅	❌	❌
维护状态	活跃	活跃	停滞

注意点

• 跨域资源：要是截图里有外部图片等跨域资源，得确保这些资源支持 CORS，不然截不出来。
• iframe 限制：SnapDOM 不能截 iframe 内容，这是浏览器的安全限制，没办法。
• Safari 浏览器兼容性：在 Safari 里用 WebP 格式时，会自动变成 PNG。
• 大型页面截图：截超大页面时，建议分块截，不然可能会内存溢出。

功能示例

社交分享

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;
}