弃用html2canvas！新一代截图神器snapdom要快800倍

关注我的公众号：【编程朝花夕拾】，可获取首发内容。

01 引言

在当今这个重交互、重体验的前端时代，网页截图功能已成为许多项目的标配需求。从生成分享图片到保存用户操作结果，截图功能无处不在。而说到前端截图，大多数人第一个想到的可能是老牌的html2canvas。

但今天，我要为大家介绍一个全新的利器------snapdom，它正在以惊人的性能表现重新定义前端截图！

02 契机

业务功能中经常会有一些表格或者页面，需要业务人员截图保存作为邮件附件来作为某项流程的证明。如果页面太长，业务人员截图费劲，且截图的结果各不相同。有时候还需要对于部分数据脱敏或者隐藏，更是加大了操作的难度。

html2canvas作为前端截图领域的"老将"，确实为无数项目提供了可靠的截图解决方案。但是随着现代网页复杂度的提升，它的局限性也日益明显：

处理复杂DOM时性能急剧下降
对大页面截图容易卡顿甚至崩溃
对CSS3新特性支持有限
生成的图片质量与效率难以兼得，容易失真。

之前没有找到替代的工具，没有办法只能先用着。无意间发现了这款工具snapdom，目前GitHub上已经有6.1kstar。想能上完全吊打html2canvas。

03 `snapdom`简介

snapDOM 是一款快速且精准的 DOM 转图像捕获工具，专为 Zumly （一个基于缩放的视图过渡框架）打造。它能将任何 HTML 元素捕获为可缩放的 SVG 图像，同时保留样式、字体、背景图像、伪元素，甚至影子 DOM。它还支持导出为光栅图像格式和画布。

官方也是对比了和html2canvas的性能，分别调用5次取平均值，开发者可以随时测试。因为受网络、电脑性能的影响，测试的结果差异较大，小编去了两者差异较小的一次结果，竟是html2canvas的800倍。总之，就是快！

GitHub地址：github.com/zumerlab/sn...

官网地址：zumerlab.github.io/snapdom/

04 最佳实践

作为后端程序员，使用的时候可能习惯了引入js的方式，其他安装方式可以参考GitHub的npm/yarn安装。

4.1 引入`js`

html 复制代码

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

4.2 案例

Html

通过html2image按钮，将第二个框的区域转化成图片，然后添加到第一个框的区域。

JS

js 复制代码

<script>
    $(".html-pdf-btn").click(async function () {
        const card = document.querySelector('.container');
        const image = await snapdom.toPng(card);
        $(".img").append(image);
    });
</script>

4.3 效果

我们可以看到，第一个元素已经是base64图片了。

05 其他用法`API`

snapdom(el, options?)

支持转化的格式：

js 复制代码

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

说明：

关于options的配置可参考GitHub。官网也提供了很多测试的方法，可以在线测试。

06 小结

snapdom的出现标志着前端截图技术进入了一个新的时代。它不仅解决了html2canvas在性能上的瓶颈，更带来了更好的开发者体验和更精准的视觉还原。

无论你是正在选型新项目的前端架构师，还是对现有截图性能不满意的开发者，都值得尝试这款新一代的截图利器。相信在不久的将来，snapdom将成为前端截图的首选解决方案！

尝试snapdom，让你的截图功能飞起来！