Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

大概意思是canvas沒法執行toDataURL方法:污染的畫布沒法輸出,請原諒個人靈魂翻譯。
經google 發現原來是受限於 CORS 策略,會存在跨域問題,雖然可使用圖像(好比append到頁面上)可是繪製到畫布上會污染畫布,一旦一個畫布被污染,就沒法提取畫布的數據,好比沒法使用使用畫布toBlob(),toDataURL(),或getImageData()方法;當使用這些方法的時候 會拋出一個安全錯誤apache

解決方案:canvas

 

圖片設置 :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"); 
   };
相關文章
相關標籤/搜索