html2canvas以及domtoimage的使用踩坑总结

背景

有个需求需要通过代码下载整个dom结构，所以我一开始使用html2canvas，但是发现在安卓中是可以的，在iOS8以上版本会出现截图整个页面空白的情况，于是为搜了很多资料，最后发现一个博主的总结踩坑跟我基本差不多，博主链接：https://segmentfault.com/a/1190000015992221，下来开始进入正题

一、html2canvas对于跨域图片，转换的时候会将跨域图片识别为空白。

问题分析：

既然是由于跨域引起的问题，那我们让资源不跨域不就可以访问了吗？

解决办法：

将图片放置服务器，通过nginx进行代理资源，前端访问图片便不涉及到跨域问题。

二.html2canvas动态加载内容，通过canvas转换出来的数据，图片为空

问题分析：

内容是动态加载进来的，转换肯定是在请求完毕之后再去转换，但是在请求完毕之后去转换，按理说所需要的所有数据都已经到达前端，应该可以转换，经过思考，发现图片内容从后台读取需要一定时间去解析，才能够完整的将图片资源展示出来，html2canvas是将页面上显示的dom元素，经过解析将dom画在canvas上在转换为image图片格式。

解决方法：

使用定时器等待一段时间在进行截图操作

三.html2canvas转换的base64位图不能被ios8以上版本所识别。会呈现出整个截图页面空白（大坑）

问题分析：

百度说是由于ios不能识别base64的前缀，于是我试过将图片的前缀去除，但发现没反应。还是无用。思来想去感觉html2canvas坑太多了

解决方法

使用dom-to-image

四、dom-to-image运用上去，在ios上能够出现内容了，但发现存在一个问题，背景图片不见了

问题分析

可能是我转成png的原因

解决方法

使用domtoimage.toSvg

五、安卓手机svg之不能将图片分享给朋友

这个简单，区分机型，安卓就直接使用html2canvas就OK啦