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 还在截图照样能出图片照样能存进浏览器本地。先认识一下 snapDOMSnapDOM 是一个面向 Web 界面的浏览器端捕获引擎把当前已渲染的 DOM 状态样式、字体、图片都包含在内凝固成一个可复用的结果再按需导出为 SVG、PNG、JPG、WebP、Canvas 或 Blob。它的差异在于快照形态捕获一次后结果持有的就是那一刻的状态源元素之后怎么变化都不会影响导出产物想要新状态再调用一次捕获即可。核心能力拆解snapDOM 离线截图的两个基本功把 DOM 元素转成 Blob引擎先对元素的计算样式做一份快照再把它画成矢量文档Blob可以理解为浏览器里的一块二进制便签方便后续存取和传输就是你拿到的最终文件。// 导出为 WebPquality 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 走有损压缩、由quality0–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(articleInvoice #1024/article); const image await result.toPng();fromString()先把标记挂载到屏幕外的真实文档里页面 CSS 和字体照常生效省掉手动插入 DOM 的步骤。注意这段字符串会像你亲手写的标记一样被解析执行不可信的 HTML 务必先用 DOMPurify 之类消毒。少踩坑的几条建议那没有网络时截图存哪儿答案在浏览器自己的本地存储里下面四个细节直接决定存得顺不顺。用 quality 控体积JPEG/WebP 等格式体积由quality0–1默认 0.92决定批量落盘时降到 0.7文件小得多——snapdom.toBlob(el, { format: webp, quality: 0.7 })。先排除无关节点exclude: .toolbar, excludeMode: remove能把工具栏移出导出hide保留不可见占位remove允许内容回流。缓存默认开着v3 对未变化的捕获自动复用同一结果如果你用insertRule这类方式程序化改了 CSSOM变化不可观测就传invalidate: true强制一次新捕获。大文件交给 IndexedDBBlob 是本地存储的原生形态小图可以塞 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考