canvas關於getImageData跨域問題解決方法

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 

最近在自學html5 CSS3很推薦李剛的 這個書<html5、css3,js權威指南>，今天在家裡測試發現 canvas中的getImageData報錯

Failed to execute 'getImageData' on 'CanvasRenderingContext2D'  ，因為以前出現過一次chrome 跨域訪問json不了的問題，所以我知道是瀏覽器的配置問題 --allow-file-access-from-files就可以了，發現網上沒有答案，於是我就想為什麼我公司的可以，我每次公司用chrome都會出現一個提示瀏覽器安全效能低的提示，我就知道了，因為公司將安全效能降到最低，所以不會出現json跨域和getImageData的

問題，於是我開啟瀏覽器，果然問題這就這裡

圖片：附1

解決方法1： --disable-web-security，我們在目標中新增上這一句就可以了記得中間有一個空格，然後關上瀏覽器，重新手動開啟輸入地址，（我的是本地檔案html直接拖放進入，不要使用dw快捷F12開啟，第一次無效，我也不知道為什麼）問題解決 （具體可參照圖片附1），同時附上問題的原因： 

1. 首先沒有伺服器環境（如：本地的 html網頁，操作本地的圖片），
    就會報"Unable to get image data from canvas because the canvas has been tainted by cross-origin data"錯誤。
    因為本地測試用的圖片是資料夾內的，js跨域限制是不能獲取非同一域名下的資料的，
    而本地的位置是沒有域名的，所以瀏覽器都認為你是跨域，導致報錯。
2. 為了阻止欺騙，瀏覽器會追蹤 image data。
   當把一個和canvas的域不同的圖片放到canvas上，這個canvas就成為 “tainted”(被汙染的)，瀏覽器就不讓你操作該canvas 的任何畫素。
   是為了阻止多種型別的XSS/CSRF攻擊（兩種典型的跨站攻擊）。

解決方法2：

將圖片轉換成為字串儲存在瀏覽器，使用時再轉換回去有興趣參考

http://blog.csdn.net/molaifeng/article/details/42293509

--------------------- 
作者：燻肉大餅 
來源：CSDN 
原文：https://blog.csdn.net/w5167839/article/details/45485645 
版權宣告：本文為博主原創文章，轉載請附上博文連結！

一、問題：在使用html5的canvas是，當用到getImageData方法獲取圖片資訊時，會碰到跨域無法獲取的情況，程式碼如下：

document.getElementById("pic").onload=function(){
    var c=document.getElementById("myCanvas");     
    var ctx=c.getContext("2d");
    var img=document.getElementById("pic");
    ctx.drawImage(img,0,0,300,300);
    var imgData=ctx.getImageData(0,0,c.width,c.height);  //問題所在
    // 反轉顏色
    for (var i=0;i<imgData.data.length;i+=4)
    {
        imgData.data[i]=255-imgData.data[i];
        imgData.data[i+1]=255-imgData.data[i+1];
        imgData.data[i+2]=255-imgData.data[i+2];
        imgData.data[i+3]=255;
    }
    ctx.putImageData(imgData,0,0);
};

在chrome會提示：

"Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at HTMLImageElement.document.getElementById.onload"的錯誤資訊

在IE中會提示：

"security error！"的錯誤資訊

二、原因：圖片儲存在本地時，是預設沒有域名的，用getImageData方法時，瀏覽器會判定為跨域而報錯！

三、方法：1.把圖片放置在伺服器中，通過伺服器返回給客戶端，遵循同源策略；

               2.用firefox瀏覽器開啟；

在firefox中效果如下：