前端生成图片功能及相关插件调研

首先丢出几个业务调研的相关插件，后续再详细介绍各个插件的坑

html2canvas

https://github.com/niklasvh/html2canvas/

domtoimage

https://github.com/tsayen/dom-to-image#readme

rasterizehtml

https://github.com/cburgmer/rasterizeHTML.js

canvg

https://github.com/canvg/canvg

序言：

生成图片功能调研

各插件底层逻辑最终都是调用JS原生canvas.toDataURL（）将canva转为image 展示在前端

注：可自行设置图片质量，设置个参数即可，详情看文档（清晰度）

MDN文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

Html2canvas 插件调研 star: 19.1K

Html2canvas是调研的几款插件github star数最高的插件。

原理是将传入的HTML ---> canvas

再调用canvas.toDataURL转为image

问题：此包问题较多，而最令人心碎的就是每个版本都有不同的坑，呈现的效果都不一样

HTML2canvas现最新版本为rc.5

经查阅，官方文档声明，其css3 属性都为自己封装，仅支持文档中的属性。

HTML2canvas支持的css3文档：http://html2canvas.hertzen.com/features/

亲测了N个历史版本的包之后，最终采用了 rc.1版本。可以在所有手机端PC及浏览器开发使用。可以自己去github上下载

心得：官方文档给予的css支持，都不像浏览器那样兼容的好。在一些安卓高版本一些安全限制不一的浏览器中都要上一些不必要的属性解决。一些盒子奇怪的边距问题，可以使用display:flex各属性试试！！

奇怪的问题太多了，孔子不懂，孟子不懂，关键是老子也没懂~~~。

这其中个把原由我翻阅源码，别的插件看明白了，这个真是呜呼哀哉太复杂了。

Dom-to-image 插件调研 star: 5.5K

原理是将传入的HTML ---> svg ---> image

速度较快

问题1：生成的svg图片在所有端口都能显示，但保存在手机后无法显示此格式，固调查下方问题2

问题2：调研此插件toPng方法，苹果正常，在安卓一些高版本以上机型的浏览器报错画布跨域污染，无法输出png图片，故调研问题3

问题3：转变思路用其生成svg ---> canvas ---> image

调研 svg转canvas插件canvg

Canvg文档调用方法不明细，及网上资料极少。

查阅源码后总结调用方法及原理如下：

v = Canvg.fromString(ctx, svg, { 

ignoreMouse: true, 

ignoreAnimation: true 

})

v.start()

DOM中要先有个canvas标签，

第一个参数传入该canvas ctx

第二个参数为svg 的html

第三个options

调用此方法后，在canvas节点下会渲染svg标签

此时再将此canvas转image

问题4：发现问题 Dom-to-image 生成的svg 与正常编写的svg不同，其内部嵌入了大量base64的外链，固转化失败。固问题3部分浏览器安全限制出现跨域问题。固放弃此插件

心得：此插件生成图片时要将有跨域图片的DOM屏蔽掉，display:none。不行哦，这个问题有时报错有时不提醒，造成生成的图片漏图现象，很难定位。

rasterizeHTML插件 star 1.9K

原理 HTML ---> img/svg

问题：试用后样式渲染不出来，官方文档声明有局限性，时间有限没在深究

最终给出最优方案如下：

promise.all先加载要生成的图片，全部完毕后，优先调用dom-to-image生成图片，因为此插件内部逻辑是先生成svg再转png所以速度较快。画质都可以调整，默认的还较为清晰。在catch里面捕捉错误，如果报错就是有安全限制的浏览器报图片跨域问题，画布污染，动态生成img上了crossorigin也无用。此处调用html2canvas针对那些高版本的安卓机型。到此为止万无一失！！