關於使用html2canvas 繪制圖片的坑


html2canvas繪制跨域圖片之后,會導致畫布被污染,從而無法使用canvas的toDateUrl()等方法獲取圖片數據的方法,這是canvas的限制而並非html2canvas的原因。好了鍋甩好了下面進入正題

  公司最近有一個需求,保存一張海報,但是卡在了將繪制后圖片轉化成base64的個砍上。查了下原因,就是因為繪制了跨域圖片,從而導致畫布無法導出成數據。行吧既然是跨域,那么就和后台說一下,把特定的圖片的Access-Control-Allow-Origin設置成*吧,但是改完之后的結果卻又不盡人意

  在chrome上確實可以導出了,但是在safari上雖然沒有爆出畫布污染,能導出了,但是跨域圖片在繪制后是一片空白。這就有點無奈了。

 最后只能使用

 將圖片轉化成base64之后,再使用html2canvas繪制,這樣雖然解決了畫布污染,和繪制空白的問題,當是后台那邊的開銷就有點奢侈了,不知到那位大神有沒有更好的解決方案。

 最后在加一句。開發h5app的同學,再ios上使用html2canvas繪制本地圖片(img src=”../../img1.png“)都會出現畫布污染的情況


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM