弃用 html2canvas！快 93 倍的截图神器
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<blockquote>
<p>在前端开发中，网页截图是个常用功能。从前，<code>html2canvas</code> 是大家的常客，但随着网页越来越复杂，它的性能问题也逐渐暴露，<code>速度慢</code>、<code>占资源</code>，用户体验不尽如人意。</p>
<p>好在，现在有了 SnapDOM，一款<code>性能超棒</code>、<code>还原度超高</code>的截图新秀，能完美替代 <code>html2canvas</code>，让截图不再是麻烦事。</p>
</blockquote>
<p> </p>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202511/2149129-20251104163635684-2101098318.png" alt="企业微信截图_20251104163241" loading="lazy"></p>
<h2 data-id="heading-0">什么是 SnapDOM</h2>
<blockquote>
<p>SnapDOM 就是一个专门用来给网页元素截图的工具。</p>
</blockquote>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202511/2149129-20251104163646187-810058278.png" alt="企业微信截图_20251104163251" loading="lazy"></p>
<blockquote>
<p> 它能把 <code>HTML</code> 元素快速又准确地存成各种图片格式，像 <code>SVG</code>、<code>PNG</code>、<code>JPG</code>、<code>WebP</code> 等等，还支持导出为 <code>Canvas</code> 元素。</p>
</blockquote>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202511/2149129-20251104163705425-1327644670.png" alt="企业微信截图_20251104163259" loading="lazy"></p>
<blockquote>
<p>它最厉害的地方在于，能把网页上的各种复杂元素，比如 <code>CSS</code> 样式、<code>伪元素</code>、<code>Shadow DOM</code>、<code>内嵌字体</code>、<code>背景图片</code>，甚至是<code>动态效果</code>的当前状态，都原原本本地截下来，跟直接看网页没啥两样。</p>
</blockquote>
<h2 data-id="heading-1">SnapDOM 优势</h2>
<h4 data-id="heading-2">快得飞起</h4>
<blockquote>
<p>测试数据显示，在不同场景下，<code>SnapDOM</code> 都把 <code>html2canvas</code> 和 <code>dom-to-image</code> 这俩老前辈远远甩在身后。</p>
</blockquote>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202511/2149129-20251104163732140-1705031976.png" alt="企业微信截图_20251104163306" loading="lazy"></p>
<blockquote>
<p>尤其在超大元素（4000×2000）截图时，速度是 html2canvas 的 <code>93.31</code> 倍，比 dom-to-image 快了 <code>133.12</code> 倍。这速度，简直就像坐火箭。</p>
</blockquote>
<h4 data-id="heading-3">还原度超高</h4>
<blockquote>
<p>SnapDOM 截图出来的效果，跟在网页上看到的一模一样。</p>
<p>各种复杂的 <code>CSS</code> 样式、<code>伪元素</code>、<code>Shadow DOM</code>、<code>内嵌字体</code>、<code>背景图片</code>，还有<code>动态效果</code>的当前状态，都能精准还原。</p>
</blockquote>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202511/2149129-20251104163749412-496902571.png" alt="企业微信截图_20251104163315" loading="lazy"></p>
<blockquote>
<p>无论是简单的元素，还是复杂的网页布局，它都能轻松拿捏。</p>
</blockquote>
<h4 data-id="heading-4">格式任你选</h4>
<blockquote>
<p>不管你是想要矢量图 <code>SVG</code>，还是常用的 <code>PNG</code>、<code>JPG</code>，或者现代化的 <code>WebP</code>，又或者是需要进一步处理的 <code>Canvas</code> 元素，SnapDOM 都能满足你。</p>
</blockquote>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202511/2149129-20251104163842536-1522354096.png" alt="企业微信截图_20251104163324" loading="lazy"></p>
<blockquote>
<p>多种格式，任你挑选，适配各种需求。</p>
</blockquote>
<h2 data-id="heading-5">三、怎么用 SnapDOM</h2>
<h3 data-id="heading-6">安装</h3>
<blockquote>
<p>SnapDOM 的安装超简单，有好几种方式：</p>
<p>用 <code>NPM</code> 或 <code>Yarn</code>：在命令行里输</p>
</blockquote>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"># npm
npm i @zumer/snapdom
# yarn
yarn add @zumer/snapdom</pre>
</div>
<blockquote>
<p>就能装好。</p>
<p>用 <code>CDN</code> 在 <code>HTML</code> 文件里加一行:</p>
</blockquote>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><script src="https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.min.js"></script></pre>
</div>
<blockquote>
<p>直接就能用。</p>
<p>要是项目里用的是 <code>ES Module</code>:</p>
</blockquote>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">import { snapdom } from '@zumer/snapdom</pre>
</div>
<h3 data-id="heading-7">基础用法示例</h3>
<h4 data-id="heading-8">一键截图</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const card = document.querySelector('.user-card');
const image = await snapdom.toPng(card);
document.body.appendChild(image);</pre>
</div>
<blockquote>
<p>这段代码就是找个元素，然后直接截成 <code>PNG</code> 图片，再把图片加到页面上。简单粗暴，一步到位。</p>
</blockquote>
<h4 data-id="heading-9">高级配置</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">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'
});</pre>
</div>
<blockquote>
<p>这儿可以对截图进行各种配置。比如 <code>scale</code> 能调整清晰度，<code>backgroundColor</code> 能设置背景色，<code>embedFonts</code> 可以内嵌字体，<code>compress</code> 能压缩优化。配置好后，还能把截图存成不同格式，或者直接下载到本地。</p>
</blockquote>
<h2 data-id="heading-10">和其他库比咋样</h2>
<blockquote>
<p>和 <code>html2canvas</code>、<code>dom-to-image</code> 比起来，<code>SnapDOM</code> 的优势很明显：</p>
</blockquote>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202511/2149129-20251104164053886-570278172.png" alt="企业微信截图_20251104163337" loading="lazy"></p>
<h2 data-id="heading-11">五、用的时候注意点</h2>
<p>用 <code>SnapDOM</code> 时，有几点得注意：</p>
<h3 data-id="heading-12">跨域资源</h3>
<p>要是截图里有外部图片等跨域资源，得确保这些资源支持 <code>CORS</code>，不然截不出来。</p>
<h3 data-id="heading-13">iframe 限制</h3>
<p>SnapDOM 不能截 <code>iframe</code> 内容，这是浏览器的安全限制，没办法。</p>
<h3 data-id="heading-14">Safari 浏览器兼容性</h3>
<p>在 Safari 里用 <code>WebP</code> 格式时，会自动变成 PNG。</p>
<h3 data-id="heading-15">大型页面截图</h3>
<p>截超大页面时，建议分块截，不然可能会<code>内存溢出</code>。</p>
<h2 data-id="heading-16">六、SnapDOM 能干啥及代码示例</h2>
<h3 data-id="heading-17">社交分享</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">async function shareAchievement() {
const card = document.querySelector('.achievement-card');
const image = await snapdom.toPng(card, { scale: 2 });
navigator.share({
files: , 'achievement.png')],
title: '我获得了新成就！'
});
}</pre>
</div>
<h3 data-id="heading-18">报表导出</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">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')}`
});
}</pre>
</div>
<h3 data-id="heading-19">海报导出</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">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;
}
</pre>
</div>
<p> </p>
<h2 data-id="heading-20">写在最后</h2>
<p>SnapDOM 就是这么一款简单、快速、准确，还零依赖的网页截图神器。</p>
<p>无论是社交分享、报表导出、设计保存，还是营销推广，它都能轻松搞定。</p>
<p>而且它是免费开源的，背后还有活跃的社区支持。要是你还在为网页截图的事儿发愁，赶紧试试 SnapDOM 吧。</p>
<hr>
<blockquote>
<p>要是你在用 <code>SnapDOM</code> 的过程中有啥疑问，或者碰上啥问题，可以去下面这些地方找答案：</p>
<ul>
<li>项目地址 ：github.com/zumerlab/sn…</li>
<li>在线演示 ：zumerlab.github.io/snapdom/</li>
<li>详细文档 ：github.com/zumerlab/sn…</li>
</ul>
</blockquote>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19190742
頁:
[1]