html2canvas以及domtoimage的使用踩坑總結

一.html2canvas對於跨域圖片,轉換的時候會將跨域圖片識別爲空白。
問題分析:
既然是由於跨域引起的問題,那我們讓資源不跨域不就可以訪問了嗎?
解決辦法:
將圖片放置服務器,通過nginx進行代理資源,前端訪問圖片便不涉及到跨域問題。

二.html2canvas動態加載內容,通過canvas轉換出來的數據,圖片爲空
問題分析:
內容是動態加載進來的,轉換肯定是在請求完畢之後再去轉換,但是在請求完畢之後去轉換,按理說所需要的所有數據都已經到達前端,應該可以轉換,經過思考,發現圖片內容從後臺讀取需要一定時間去解析,才能夠完整的將圖片資源展示出來,html2canvas是將頁面上顯示的dom元素,經過解析將dom畫在canvas上在轉換爲image圖片格式。
解決辦法:
1.讓html2canvas轉換代碼等待一定時間,在進行轉換操作,可進行轉換。代碼如下圖所示

clipboard.png

2.當全部的圖片數據都加載完畢之後,在執行轉換操作。(本人建議第二種,更保險)

clipboard.png

三.html2canvas轉換的base64位圖不能被ios8以上版本所識別。會呈現出整個截圖頁面空白
問題分析:
這個問題的起因,應該是html2canvas對高版本的ios不支持(自我感覺),這個問題我很是頭疼,當時根本沒有對ios進行測試。客戶使用的時候發現了這個問題,沒法。想辦法解決。百度說是由於ios不能識別base64的前綴,於是我試過將圖片的前綴去除,但發現沒反應。還是無用。思來想去感覺html2canvas坑太多了。填都填不完。於是。
解決辦法:
我採用了另一款插件,dom-to-image,弄上去沒有問題了。

clipboard.png

四.dom-to-image運用上去,在ios上能夠出現內容了,但發現存在一個問題,部分圖片內容,第一次進行公衆號網頁加載,沒有正確顯示,要在次進入纔會顯示,此bug同樣是ios8以上版本
問題分析:
這一個問題我沒有找到問題所在,一臉懵,不過最終還是得到了解決。
解決辦法:
運用dom-to-imagede toSvg方式完美解決問題。

clipboard.png

五.離成功只有一步之遙了,使用了svg之後安卓手機不能將圖片分享給朋友。識別不了
問題分析:
安卓能識別jpeg但不能識別svg矢量圖片
解決辦法:
自己手寫咯。判斷手機爲安卓還是ios。

clipboard.png

六.所有的問題都已解決,我興奮的跑去借了個果5,拿來測試,發現網頁的背景圖片不見了。
問題分析:
我長按兩秒左右又是正常顯示了,故圖片是已經完美轉換成功,可能是因爲圖片在轉換過程中,沒有完美適配到4.0寸的屏幕,
解決辦法:
模擬長按事件,解決bug,這個方式可能不太好,但也是一種解決方式。

總結

躺過的坑都是我的經驗,分享的同時我又加固了一遍。解決實際問題的思路,在過了一遍,對我幫助很棒。

原文:https://segmentfault.com/a/1190000015992221

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章