Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
阿新 • • 發佈:2018-11-25
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
大概意思是canvas無法執行toDataURL方法:汙染的畫布無法輸出,請原諒我的靈魂翻譯。
經google 發現原來是受限於 CORS 策略,會存在跨域問題,雖然可以使用影象(比如append到頁面上)但是繪製到畫布上會汙染畫布,一旦一個畫布被汙染,就無法提取畫布的資料,比如無法使用使用畫布toBlob(),toDataURL(),或getImageData()方法;當使用這些方法的時候 會丟擲一個安全錯誤
解決方案:
圖片設定 :crossOrigin屬性
程式碼片段:img.setAttribute("crossOrigin",'Anonymous')
完整程式碼:
`` var canvas=document.getElementById("canvas"),//獲取canvas ctx = canvas.getContext("2d"), //對應的CanvasRenderingContext2D物件(畫筆) img = new Image(),//建立新的圖片物件 base64 = '' ;//base64 img.src = 'http://www.xxxx.png'; img.setAttribute("crossOrigin",'Anonymous') img.onload = function(){//圖片載入完,再draw 和 toDataURL ctx.drawImage(img,0,0); base64 = canvas.toDataURL("image/png"); };