Use html2canvas and domtoimage stepped pit summary

Foreword

首先做个自我介绍,我是成都某企业的一名刚刚入行约一年的前端,在之前的开发过程中,遇到了问题,也解决了问题,但是在下一次解决相同问题的时候,只对这个问题有一丝丝的印象,还需要从新去查找,于是,我注册了segmemtfault,便于搜集我的问题总结,以及将踩坑经验分享给每一个开发人员,好了,闲话不多说。

demand

需求:要求能够实现根据后端返回的数据生成一张image,便于用户将图片分享到朋友或者朋友圈,取得用户的关注。

He began to step on pit

.Html2canvas for a cross-domain images, time conversion will cross-domain images identified as blank.
Analysis:
Since it is due to problems caused by cross-domain, then we do not allow cross-domain resources can not access it?
Solution:
This places the image server, proxy resources by nginx, front-access picture will not involve cross-domain issues.

Two .html2canvas dynamically loaded content, data conversion out through the canvas, the picture is empty
Analysis:
Content is dynamically loaded coming in, the conversion must be converted again after the completion of the request, but after the completion of the request to convert, and normally need All data has reached the front, should be able to convert, reflection, find the picture content take some time to resolve to read from the background, to be able to show a complete picture out of resources, html2canvas dom element is displayed on the page, parsed the painting dom converting to image format images on canvas.
Solution:
1. Let html2canvas transcoding wait for a certain time during the conversion operation, can be converted. Code is shown below

clipboard.png

2. When all of the picture data are loaded in the implementation of the conversion operation. (I suggest a second, more Insurance)

clipboard.png

三.html2canvas转换的base64位图不能被ios8以上版本所识别。会呈现出整个截图页面空白
问题分析:
这个问题的起因,应该是html2canvas对高版本的ios不支持(自我感觉),这个问题我很是头疼,当时根本没有对ios进行测试。客户使用的时候发现了这个问题,没法。想办法解决。百度说是由于ios不能识别base64的前缀,于是我试过将图片的前缀去除,但发现没反应。还是无用。思来想去感觉html2canvas坑太多了。填都填不完。于是。
解决办法:
我采用了另一款插件,dom-to-image,弄上去没有问题了。

clipboard.png

四.dom-to-image运用上去,在ios上能够出现内容了,但发现存在一个问题,部分图片内容,第一次进行公众号网页加载,没有正确显示,要在次进入才会显示,此bug同样是ios8以上版本
问题分析:
这一个问题我没有找到问题所在,一脸懵,不过最终还是得到了解决。
解决办法:
运用dom-to-imagede toSvg方式完美解决问题。

clipboard.png

五.离成功只有一步之遥了,使用了svg之后安卓手机不能将图片分享给朋友。识别不了
问题分析:
安卓能识别jpeg但不能识别svg矢量图片
解决办法:
自己手写咯。判断手机为安卓还是ios。

clipboard.png

VI. All issues have been resolved, I am excited to go borrowed a fruit 5, used to test and found that the page background image disappeared.
Analysis:
I press about two seconds is displayed properly, it is picture perfect conversion has been successful, probably because the picture in the conversion process, there is no perfect adaptation to the 4.0-inch screen,
solution:
simulate a long press event, solve bug, this approach may not be good, but it is also one of the solutions.

to sum up

The pit had been lying all my experience, I share the same time strengthening again. Ideas to solve practical problems in the past again, a great help to me.

Guess you like

Origin www.cnblogs.com/baimeishaoxia/p/11870191.html