酒浓码浓 - 前端生成图片插件

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

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

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针对那些高版本的安卓机型。到此为止万无一失！！

如有任何问题欢迎留言，如有帮助给点个赞，整个关注老铁，这功能要兼容各种机型可真是没少下心血~