snapDOM 上线即爆火，html2canvas 被彻底淘汰?

boyanx4个月前 (08-03)技术教程33

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

什么是 snapDOM

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

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

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

完整的 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 也有一些限制条件，包括: