html2canvas以及domtoimage的使⽤踩坑总结
前⾔
⾸先做个⾃我介绍，我是成都某企业的⼀名刚刚⼊⾏约⼀年的前端，在之前的开发过程中，遇到了问题，也解决了问题，但是在下⼀次解决相同问题的时候，只需求
需求：要求能够实现根据后端返回的数据⽣成⼀张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，拿来测试，发现⽹页的背景图⽚不见了。
问题分析：svg canvas
我长按两秒左右⼜是正常显⽰了，故图⽚是已经完美转换成功，可能是因为图⽚在转换过程中，没有完美适配到4.0⼨的屏幕，解决办法：
模拟长按事件，解决bug，这个⽅式可能不太好，但也是⼀种解决⽅式。
总结
躺过的坑都是我的经验，分享的同时我⼜加固了⼀遍。解决实际问题的思路，在过了⼀遍，对我帮助很棒。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。