html2canvas以及domtoimage的使用踩坑总结

MageekChiu 发布于2019-08-02 11:14 / 3673人阅读

摘要：本人建议第二种，更保险三转换的位图不能被以上版本所识别。客户使用的时候发现了这个问题，没法。五离成功只有一步之遥了，使用了之后安卓手机不能将图片分享给朋友。识别不了问题分析安卓能识别但不能识别矢量图片解决办法自己手写咯。判断手机为安卓还是。

前言

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

需求

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

开始踩坑

一.html2canvas对于跨域图片，转换的时候会将跨域图片识别为空白。
问题分析：
既然是由于跨域引起的问题，那我们让资源不跨域不就可以访问了吗？
解决办法：
将图片放置服务器，通过nginx进行代理资源，前端访问图片便不涉及到跨域问题。

二.html2canvas动态加载内容，通过canvas转换出来的数据，图片为空
问题分析：
内容是动态加载进来的，转换肯定是在请求完毕之后再去转换，但是在请求完毕之后去转换，按理说所需要的所有数据都已经到达前端，应该可以转换，经过思考，发现图片内容从后台读取需要一定时间去解析，才能够完整的将图片资源展示出来，html2canvas是将页面上显示的dom元素，经过解析将dom画在canvas上在转换为image图片格式。
解决办法：
1.让html2canvas转换代码等待一定时间，在进行转换操作，可进行转换。代码如下图所示

2.当全部的图片数据都加载完毕之后，在执行转换操作。（本人建议第二种，更保险）

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

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

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

六.所有的问题都已解决，我兴奋的跑去借了个果5，拿来测试，发现网页的背景图片不见了。
问题分析：
我长按两秒左右又是正常显示了，故图片是已经完美转换成功，可能是因为图片在转换过程中，没有完美适配到4.0寸的屏幕，
解决办法：
模拟长按事件，解决bug，这个方式可能不太好，但也是一种解决方式。

总结

躺过的坑都是我的经验，分享的同时我又加固了一遍。解决实际问题的思路，在过了一遍，对我帮助很棒。

专线服务云服务器亚马逊云服务器租用以及使用使用方法总结 domtoimage 免费的域名以及服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52858.html

html2canvas以及domtoimage的使用踩坑总结

摘要：本人建议第二种，更保险三转换的位图不能被以上版本所识别。客户使用的时候发现了这个问题，没法。五离成功只有一步之遥了，使用了之后安卓手机不能将图片分享给朋友。识别不了问题分析安卓能识别但不能识别矢量图片解决办法自己手写咯。判断手机为安卓还是。前言首先做个自我介绍，我是成都某企业的一名刚刚入行约一年的前端，在之前的开发过程中，遇到了问题，也解决了问题，但是在下一次解决相同问题的时候，只...

邹强 2019-08-23 11:01 评论0 收藏0
Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地

摘要：由于客户的需求，将写出来的一个统计能够保存到本地。作为码奴的我只能慢慢搬砖咯一开始使用的是。功能是可以实现，但是有缺陷。用附件中的画画和其他工具打开又没有什么问题下了班等下回去家里的电脑看看由于客户的需求，将js写出来的一个统计能够保存到本地。作为码奴的我只能慢慢搬砖咯！一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷。话不多说开始搞！ 1、引入几个JS库 ①：jque...

番茄西红柿 2019-04-23 11:47 评论0 收藏0