弃用 html2canvas！快 93 倍的截图神器！

作者：前端开发爱好者

原文：mp.weixin.qq.com/s/t0s5dCOrs…

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