html2canvas截图字体重叠,【你并不总是需要html2canvas】一，截图适配

1 序章

《你并不总是需要html2canvas》将会是系列文章，逐步讲解如何使用canvas原生api来实现我们的截图需求，文章将围绕不使用html2canvas需要解决的一系列问题来展开，期望能给大家带来如下收获:

熟悉canvas原生api(但不像接口文档)；

了解到html2canvas解决了哪些问题，而我们自己可以怎么解决；

分析需求，按需使用或制造“轮子”的能力；

2 背景

相信H5截图分享的功能大家都做过，而且会反复做。凡是反复做的事情，我都会想：“下一次怎么做得更好，或者更快”，毕竟我是一个“懒惰”而又“没有耐心”的人。懒惰驱动我提高生产力，没有耐心驱使我在同样一件事情上不断挖掘新的东西，否则容易在重复中失去耐心。

说到截图，大名鼎鼎的html2canvas - Screenshots with javascript大家肯定耳熟能详，强大，易用。感谢开源社区的贡献，确实帮我们节省了很多力气。

// 使用示例

html2canvas(document.querySelector("#capture")).then(canvas => {

document.body.appendChild(canvas)

});

复制代码

但在使用过程中我也遇到了一些问题：

体积大(gzip 40k，未gzip 161k) - 通用的开源模块大而全也是常态；

黑盒 - 和预期不符只能搜索求助，比较难定位；

不好个性化处理 - 例如显示和截图不一致时，需要多维护一套截图用的DOM；

不好优化绘制耗时 - 例如在重复绘图时，可以把一些固定不变的内容绘制到一个缓存canvas上面，后续把这个canvas绘制到目标canvas即可，这个缓存canvas的内容不用反复绘制；

因此，简单分析截图分享的需求(如上图所示)后，我决定试试自己直接绘制，于是就开始了我的踩坑之旅。如果你也想为了一点点的体积优化而不使用html2canvas，那请做好心理准备解决下列问题：

适配(1/2/3倍图...)

图片绘制(头像圆形裁剪...)

文字绘制(定位，局部高亮，自动换行，自动省略...)