snapDOM 上线即爆火，html2canvas

什么是 snapDOM
snapDOM 是一款快速精准的 DOM 转图像捕获工具，专为基于缩放的视图过渡框架 Zumly 打造。

snapDOM captures HTML elements as images with exceptional speed and accuracy.

snapDOM 可以将任何 HTML 元素捕获为可缩放的 SVG 图像，并保留样式、字体、背景图像、伪元素甚至阴影 DOM，其还支持导出为光栅图像格式和 ，其具有以下明显特点：

完整的 DOM 捕获，支持影子 DOM 和 Web Component
嵌入的样式、伪元素和字体，例如：::before 和 ::after 伪元素，同时也支持处理 Font Awesome、Material Icons 等
️ 导出为 SVG、PNG、JPG、WebP 或画布
⚡ 超快，无依赖
100% 基于标准 Web API
支持使用 data-capture=”exclude” 用于忽略元素
支持 data-capture=”placeholder” 和 data-placeholder-text 用于遮罩替换

snapDOM 不仅高度准确，而且速度极快。最新的基准测试表明，其与其他库相比，性能有显著提升：

目前 snapDOM 在 Github 通过 MIT 协议开源，短短开源时间有接近 1k 的 star、是一个值得关注的前端开源项目。

如何使用 snapDOM
首先需要安装相应的依赖：

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

// 或者使用 CDN

<script src="https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.min.js"></script>

接着就可以项目中引用：

import {snapdom} from './snapdom.mjs';

// 或者 CDN 引入

<script type="module">
  import {snapdom} from 'https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.mjs';
</script>

下面是 snapDOM 的最基础用法：

const el = document.querySelector('#target');
const result = await snapdom(el, { scale: 2});

const img = await result.toPng();
document.body.appendChild(img);

await result.download({format: 'jpg', filename: 'my-capture'});

当然也可以使用下面的快捷方法：

const el = document.querySelector(‘#target’);
const png = await snapdom.toPng(el);
document.body.appendChild(png);
const blob = await snapdom.toBlob(el);
其中 snapdom(el, options?) 返回具有可重用导出方法的对象：

{
  url: string;
  toRaw(): string;
  toImg(): Promise<HTMLImageElement>;
  // 返回 HTMLImageElement 对象
  toCanvas(): Promise<HTMLCanvasElement>;
  // 返回 Canvas 对象
  toBlob(): Promise<Blob>;
  //   返回 Blob 对象
  toPng(): Promise<HTMLImageElement>;
  // 返回 PNG 图片
  toJpg(options?): Promise<HTMLImageElement>;
  // 返回 JPG 图像
  toWebp(options?): Promise<HTMLImageElement>;
  // 返回 Webp 图像
  download(options?): Promise<void>;
}

同时值得一提的是，snapDOM 的 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');
    });

当然，除了以上说明的优点外，snapDOM 也有一些限制条件，包括:

外部图片必须支持 CORS 访问
不支持 iframe 在 Safari 上使用 WebP 格式时，将回退到 PNG 渲染
参考资料
https://github.com/zumerlab/snapdom?tab=readme-ov-file

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