企业官网建设流程全解析

snapDOM 离线截图：无网络环境 DOM 图片导出完全指南

【免费下载链接】snapdomHigh-performance engine for capturing, modifying, and converting DOM elements into any format.项目地址: https://gitcode.com/GitHub_Trending/sn/snapdom

你的"另存为图片"按钮在办公 WiFi 里好用，用户一进地铁就瘫痪——因为捕获渲染被交到了服务器端的无头浏览器上。📷 snapDOM 离线截图引擎给出了另一种做法：所有捕获逻辑都运行在用户自己的页面里，只用标准 Web API，核心零依赖。断网了？DOM 还在，截图照样能出，图片照样能存进浏览器本地。

先认识一下 snapDOM

SnapDOM 是一个面向 Web 界面的浏览器端捕获引擎：把当前已渲染的 DOM 状态（样式、字体、图片都包含在内）凝固成一个可复用的结果，再按需导出为 SVG、PNG、JPG、WebP、Canvas 或 Blob。

它的差异在于"快照"形态：捕获一次后，结果持有的就是那一刻的状态，源元素之后怎么变化都不会影响导出产物；想要新状态，再调用一次捕获即可。

核心能力拆解：snapDOM 离线截图的两个基本功

把 DOM 元素转成 Blob

引擎先对元素的计算样式做一份"快照"，再把它画成矢量文档；Blob（可以理解为浏览器里的一块"二进制便签"，方便后续存取和传输）就是你拿到的最终"文件"。

// 导出为 WebP，quality 0.7 控制文件体积 const blob = await snapdom.toBlob(document.querySelector('#card'), { format: 'webp', quality: 0.7 });

一句话：调一次就拿到可以直接放进 IndexedDB 或保存对话框的 Blob，实现位于 src/exporters/toBlob.js。注意toBlob默认返回 SVG，要拿到栅格图必须显式指定format。

一次捕获，多种导出，挑对尺寸

捕获是贵的那一步，导出是便宜的。const result = await snapdom(card)之后，result.toPng()、result.toCanvas()、result.toBlob({ format: 'png' })、result.download({ format: 'jpg', filename: 'card' })都能用。格式上：SVG 矢量无损缩放，PNG 无损适合图文，JPG/WebP 走有损压缩、由quality（0–1，默认 0.92）控制；尺寸上：width/height是绝对输出尺寸，两者都不设时才由scale生效，dpr再乘一次像素密度。另外 JPG 和 WebP 默认白底，PNG 默认透明背景。

动手实战：两个无网络环境图片导出的典型用法

分享卡片或发票图片——这是 snapDOM 最原生的用例，README 里给出的最短路径就三行：

// 一步完成捕获+导出，返回 <img> 元素 const image = await snapdom.toPng(document.querySelector('#card')); document.body.appendChild(image);

toPng是"捕获+导出"的捷径，返回的<img>元素直接挂进页面，用户右键即可保存，全程没有一次服务器往返。

除了捕获页面上现存的元素，它也能处理尚未挂载的标记——比如 SSR 吐出来的发票模板字符串。

捕获模板字符串：

// 字符串先在屏幕外挂载，捕获完自动清理 const result = await snapdom.fromString('<article>Invoice #1024</article>'); const image = await result.toPng();

fromString()先把标记挂载到屏幕外的真实文档里，页面 CSS 和字体照常生效，省掉手动插入 DOM 的步骤。注意：这段字符串会像你亲手写的标记一样被解析执行，不可信的 HTML 务必先用 DOMPurify 之类消毒。

少踩坑的几条建议

那没有网络时，截图存哪儿？答案在浏览器自己的本地存储里，下面四个细节直接决定存得顺不顺。

• 用 quality 控体积：JPEG/WebP 等格式体积由quality（0–1，默认 0.92）决定，批量落盘时降到 0.7，文件小得多——snapdom.toBlob(el, { format: 'webp', quality: 0.7 })。
• 先排除无关节点：exclude: '.toolbar', excludeMode: 'remove'能把工具栏移出导出；'hide'保留不可见占位，'remove'允许内容回流。
• 缓存默认开着：v3 对未变化的捕获自动复用同一结果；如果你用insertRule这类方式程序化改了 CSSOM，变化不可观测，就传invalidate: true强制一次新捕获。
• 大文件交给 IndexedDB：Blob 是本地存储的原生形态，小图可以塞 localStorage，多而大就把 Blob 放进 IndexedDB 的对象存储里。捕获内嵌图片的降采样压缩是自动的（见 src/modules/compress.js），无需配置。

上手清单

• 捕获一次，导出多种格式
• 未变化元素，复用同一捕获
• 不可信 HTML，先消毒再捕获
• 大截图，存进 IndexedDB

下次断网，"另存为图片"按钮依然在干活——截图留在用户手里，而不是等一个回不来包。✅

【免费下载链接】snapdomHigh-performance engine for capturing, modifying, and converting DOM elements into any format.项目地址: https://gitcode.com/GitHub_Trending/sn/snapdom