需求:頁面中用echarts畫的地圖驱负,想要通過保存圖片按鈕景图,將整個頁面保存下來宽气,如下圖
![QQ圖片20200102105640.jpg](https://upload-images.jianshu.io/upload_images/3074863-787bf7369b7bb216.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
第一步就是echarts畫地圖改化,接著用html2canvas生成圖片,但是echarts畫的地圖在手機端最小字體為12px,要想顯示全部城市名哮伟。在手機上會擠在一起很難看干花,所以需要先畫個大的地圖,再把大地圖轉(zhuǎn)化為圖片 縮小到屏幕寬度放在頁面中楞黄,將原來的echarts地圖隱藏池凄,這里用絕對定位,z-index設(shè)為-1鬼廓;
canvas用toDataURL方法轉(zhuǎn)化為base64的圖片之后放在img標簽內(nèi)肿仑,然后去手機中點保存圖片按鈕,結(jié)果ios保存的圖片沒有地圖碎税。
在網(wǎng)上搜了很多關(guān)于ios html2canvas的解決方法尤慰,逛了一天,把所有的罪過都給了html2canvas和base64的問題
最后問我?guī)煾咐柞澹f “你確定是base64圖 或者是html2canvas的鍋嗎”
一語驚醒夢中人啊伟端,我把普通圖片放在img里面 發(fā)現(xiàn)ios還是空白---于是我排除了base64的鍋
然后我再單獨寫一個img標簽 任何樣式都沒有加 用html2canvas 結(jié)果ios不是空白了!7嘶汀T痱稹!NァK健!
那肯定是css的鍋了啊驳规,支子,,达舒,把每個樣式都去掉 排除法----animation的鍋啊L局丁9!V捍9岬住!!G堇Αs鲜病!E呦搿K銎尽!浊服!
我之前為了讓地圖出來的時候有些動畫 于是給img加了一點動畫统屈,,牙躺,愁憔,,然后~~~~~可怕
最后送給每個開發(fā)者孽拷,不要想當然吨掌,不要以為網(wǎng)上有這種問題 你的代碼就是網(wǎng)上的問題,要一步步的排查問題脓恕,再去解決 而不是上來就找解決方法膜宋,問題都還沒搞清楚~~~~~~~~