首頁  >  問答  >  主體

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

<p>我的程式碼在本機上運作得很好,但在網站上卻無法運作。 </p> <p>我從控制台收到此錯誤,對於這一行 <code>.getImageData(x,y,1,1).data</code>:</p> <pre class="brush:php;toolbar:false;">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; }</pre> <p><strong>注意:</strong>我的映像網址 (src) 來自子網域網址</p>
P粉343141633P粉343141633441 天前558

全部回覆(1)我來回復

  • P粉465675962

    P粉4656759622023-08-30 09:13:14

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

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

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

    img.crossOrigin = "Anonymous";

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

    Access-Control-Allow-Origin "*"

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

    回覆
    0
  • 取消回覆