html2canvas繪制跨域圖片之后,會導致畫布被污染,從而無法使用canvas的toDateUrl()等方法獲取圖片數據的方法,這是canvas的限制而並非html2canvas的原因。好了鍋甩好了下面進入正題
公司最近有一個需求,保存一張海報,但是卡在了將繪制后圖片轉化成base64的個砍上。查了下原因,就是因為繪制了跨域圖片,從而導致畫布無法導出成數據。行吧既然是跨域,那么就和后台說一下,把特定的圖片的Access-Control-Allow-Origin設置成*吧,但是改完之后的結果卻又不盡人意
在chrome上確實可以導出了,但是在safari上雖然沒有爆出畫布污染,能導出了,但是跨域圖片在繪制后是一片空白。這就有點無奈了。
最后只能使用
將圖片轉化成base64之后,再使用html2canvas繪制,這樣雖然解決了畫布污染,和繪制空白的問題,當是后台那邊的開銷就有點奢侈了,不知到那位大神有沒有更好的解決方案。
最后在加一句。開發h5app的同學,再ios上使用html2canvas繪制本地圖片(img src=”../../img1.png“)都會出現畫布污染的情況
