自从换上这款轻量高能的截图开发库，html2canvas 已彻底被我打入冷宫。

SnapDOM 介绍

免费开源的JS现代网页截图/海报生成库，捕获DOM的高保真工具。在现代web开发中，将网页元素转换为高质量的图像变得越来越重要。

snapDOM是为Zumly（一个基于缩放的视图转换框架）构建的快速、准确的dom到图像捕获工具。它将任何HTML元素捕获为可伸缩的SVG图像，保留样式、字体、背景图像、伪元素，甚至影子DOM。它还支持导出到光栅图像格式和画布。

SnapDOM 是一款高性能网页截图的 JavaScript 工具库，解决了传统截图工具（如html2canvas）的性能瓶颈和渲染精度问题。SnapDOM 仅支持现代浏览器，主打 “精准捕获、极速渲染”，支持将任意DOM元素（包括动态内容、CSS3特效、跨域资源）转换为高质量图片（PNG/JPEG/WebP）。

github：https://github.com/vitaly-z/snapdom.git

Demo：https://zumerlab.github.io/snapdom/

技术特性

完全DOM捕获

嵌入样式，伪元素和字体️导出到SVG， PNG， JPG， WebP或画布

超快，无依赖

100%基于标准Web

简单易用

SnapDOM 虽然功能强大、性能优异，但用法很简单，API 很简单。

安装

npm/yarn

npm i @zumer/snapdom
或
yarn add @zumer/snapdom

CDN

<script src=”https://cdn.jsdelivr.net/npm/@zumer/snapdom/dist/snapdom.min.js”></script>

Script tag (local)
<script src=”snapdom.js”></script>

简单截图实现

import { snapdom } from '@zumer/snapdom';
const el = document.querySelector('#content');
// 以2倍图大小截图
const res = await snapdom(el, { scale: 2 });
// 将截图显示在网页
const img = await res.toPng();
document.body.appendChild(img);
// 下载图片为指定格式
await res.download({ format: 'jpg', filename: '截图.jpg' });

API

snapdom(el, options?) 返回一个具有可重用导出方法的对象：

{
  url: string;
  toRaw(): string;
  toImg(): Promise<HTMLImageElement>;
  toCanvas(): Promise<HTMLCanvasElement>;
  toBlob(): Promise<Blob>;
  toPng(): Promise<HTMLImageElement>;
  toJpg(options?): Promise<HTMLImageElement>;
  toWebp(options?): Promise<HTMLImageElement>;
  download(options?): Promise<void>;
}

方法：

Method	Description
snapdom.toImg(el, options?)	返回一个html元素
snapdom.toCanvas(el, options?)	返回画布
snapdom.toBlob(el, options?)	返回一个SVG Blob
snapdom.toPng(el, options?)	返回一个 PNG 图片
snapdom.toJpg(el, options?)	返回一个 JPG 图片
snapdom.toWebp(el, options?)	返回WebP图片
snapdom.download(el, options?)	触发以指定格式下载

Options：所有捕获方法都接受一个options对象：

Option	Type	Default	Description
compress	boolean	true	删除多余的样式
fast	boolean	true	跳过空闲延迟以获得更快的结果
embedFonts	boolean	false	内联字体（总是嵌入图标字体）
scale	number	1	输出放大倍数
backgroundColor	string	"#fff"	JPG/WebP的背景色
quality	number	1	JPG/WebP图片质量，可选值范围0到1

下载options：

{
  format?: "svg" | "png" | "jpg" | "jpeg" | "webp"; // default: "png"
  filename?: string;         // default: "capture"
  backgroundColor?: string;  // optional override
}

preCache() 

preCache（）函数可用于预先加载外部资源（如图像和字体）。当要捕获的元素大而复杂时，它特别有用。

import { preCache } from '@zumer/snapdom';
await preCache(document.body);
或
import { snapdom, preCache } from './snapdom.mjs';
    window.addEventListener('load', async () => {
    await preCache();
    console.log('📦 Resources preloaded');
    });

Options for preCache():

reset (boolean, default: false) — 清除所有现有的内部缓存。

embedFonts (boolean, default: true) — 在预加载期间内联非图标字体。

限制：

外部映像必须是cors可访问的

不支持iframe

当在Safari上使用WebP格式时，它将退回到PNG呈现。