前言首先自我介绍一下。我是成都一家公司的前端，刚入行一年左右。在之前的开发过程中，遇到问题并解决。但是下次解决同样的问题时，我对这个问题只有一点印象，需要重新找。因此，我注册了segmemtfault，方便收藏我的问题总结，也方便各位开发者分享踩坑的经验，好了，不多说了。需求：要求能够根据后台返回的数据生成图片，方便用户将图片分享给朋友或者朋友圈，获得用户的关注。开始踩坑。html2canvas对于跨域图片，在转换时会将跨域图片识别为空白。问题分析：既然问题是跨域引起的，那么不跨域是否可以访问资源呢？解决方法：将图片放在服务器上，通过nginx代理资源，这样前端访问图片就不会涉及跨域问题。2、html2canvas动态加载内容，canvas转换的数据，图片为空问题分析：内容是动态加载进来的，必须在请求完成后才进行转换，但逻辑上是请求完成后才需要转换所有的数据都到了前端，应该可以转换了。想了想，发现从后台解析图片内容到完整展示图片资源是需要一定时间的。html2canvas是解析页面显示的dom元素在canvas上绘制dom并转为图片格式。解决方法：1、让html2canvas转换代码等待一定时间，在转换操作的过程中进行转换即可。代码如下图2.加载完所有图片数据后，进行转换操作。（我建议第二种方法，更安全）3、html2canvas转换的base64位图，ios8及以上无法识别。会有整个截图页面空白问题的分析：出现这个问题的原因应该是html2canvas不支持高版本的ios（自我感觉）。客户在使用的时候发现了这个问题，但是没有办法。寻找解决方案。百度说是因为ios无法识别base64的前缀，于是尝试去掉图片的前缀，发现没有反应。还是没用。想了想，觉得html2canvas的坑太多了。我什至无法填写它。然后。解决方法：我用了另外一个插件，dom-to-image，效果不错。4、使用dom-to-image后，内容可以出现在ios上，但是有问题。部分图片内容，页面第一次加载公众号时显示不正确，下次进入后才会显示。这个bug也是ios8及以上版本的问题分析：没发现这个问题，一头雾水，最后解决了。解决方法：使用dom-to-imagedetoSvg的方式完美解决问题。5、离成功只差一步。使用svg后，安卓手机无法分享图片给好友。无法识别问题分析：Android能识别jpeg但不能识别svg矢量图解决方法：手写。判断手机是android还是ios。6.问题都解决了，兴冲冲的跑去借了个水果5，拿来测试，发现网页背景图不见了。问题分析：我长按两秒左右又正常显示了，所以图片已经完美转换了。可能是图片在转换过程中没有完美适配4.0寸屏幕。解决方案：模拟长按事件，解决bug可能不是一个好办法，但也是一个解决方案。总结一下自己一直躺的坑就是我的经验，分享的时候再次加强了。解决实际问题的思路，再经历一遍，对我很有帮助。
