canvas生成圖片toDataURL報錯的原因和解決方法

現象：在使用canvas的toDataURL（）方法時，控制台有時會報錯：Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

原因：這是由於之前由drawImage（）向canvas導入的圖片跨域而導致的。

解決方法：

1、在引用圖片之前打開跨域資源允許權限（一定要注意順序）：

        var img=new Image;
        img.crossOrigin="anonymous"; //關鍵
3         img.src="圖片地址";

2、存放圖片地址的服務器也要開啟跨域允許權限，不然會報錯：No 'Access-Control-Allow-Origin' header is present on the requested resource.

     如Apache設置：

     ①.打開LoadModule headers_module modules/mod_headers.so

     ②.在虛擬主機<Directory></Directory>內加上 Header set Access-Control-Allow-Origin *