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

一、問題：在使用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中效果如下：