需求:页面中用echarts画的地图,想要通过保存图片按钮,将整个页面保存下来,如下图
第一步就是echarts画地图,接着用html2canvas生成图片,但是echarts画的地图在手机端最小字体为12px,要想显示全部城市名。在手机上会挤在一起很难看,所以需要先画个大的地图,再把大地图转化为图片 缩小到屏幕宽度放在页面中,将原来的echarts地图隐藏,这里用绝对定位,z-index设为-1;
canvas用toDataURL方法转化为base64的图片之后放在img标签内,然后去手机中点保存图片按钮,结果ios保存的图片没有地图。
在网上搜了很多关于ios html2canvas的解决方法,逛了一天,把所有的罪过都给了html2canvas和base64的问题
最后问我师父,他说 “你确定是base64图 或者是html2canvas的锅吗”
一语惊醒梦中人啊,我把普通图片放在img里面 发现ios还是空白---于是我排除了base64的锅
然后我再单独写一个img标签 任何样式都没有加 用html2canvas 结果ios不是空白了!!!!!!!
那肯定是css的锅了啊,,,,把每个样式都去掉 排除法----animation的锅啊!!!!!!!!!!!!!!
我之前为了让地图出来的时候有些动画 于是给img加了一点动画,,,,,然后~~~~~可怕
最后送给每个开发者,不要想当然,不要以为网上有这种问题 你的代码就是网上的问题,要一步步的排查问题,再去解决 而不是上来就找解决方法,问题都还没搞清楚~~~~~~~~