解決getImageData()錯誤：畫布被跨域資料污染的問題

Question

我的程式碼在本機上運作得很好，但在網站上卻無法運作。

我從控制台收到此錯誤，對於這一行 .getImageData(x,y,1,1).data:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.</pre&>
<p>我的程式碼的一部分：</p>
<pre class="brush:php;toolbar:false;">jQuery.Event.prototype.rgb=function(){
        var x = this.offsetX || (this.pageX - $(this.target).offset().left),y = this.offsetY || (this.pageY - $(this.target).offset(). top);
        if (this.target.nodeName!=="CANVAS")return null;
        return this.target.getContext('2d').getImageData(x,y,1,1).data;
    }

注意：我的映像網址 (src) 來自子網域網址

Answer 1

正如其他人所說，您透過從跨源域載入來「污染」畫布。

https://developer.mozilla.org/en-US/docs/ HTML/CORS_Enabled_Image

但是，您可以透過簡單地設定來防止這種情況：

img.crossOrigin = "Anonymous";

只有當遠端伺服器正確設定以下標頭時，這才有效：

Access-Control-Allow-Origin "*"

使用「直接連結」選項時的 Dropbox 檔案選擇器這就是一個很好的例子。我在 oddprints.com 上使用它來將遠端保管箱圖像網址中的圖像吸到我的畫布中，然後將圖像資料提交回我的伺服器。全部用 JavaScript 寫