getImageData() エラーを修正するにはどうすればいいですか? キャンバスはクロスオリジンデータによって汚染されていますか? 質問する

getImageData() エラーを修正するにはどうすればいいですか? キャンバスはクロスオリジンデータによって汚染されていますか? 質問する

私のコードはローカルホスト上では正常に動作していますが、サイトでは動作しません。

コンソールから次の行に対して次のエラーが発生しました.getImageData(x,y,1,1).data:

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

私のコードの一部:

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;
    }

注記:私の画像のURL(src)はサブドメインのURLからのものです

ベストアンサー1

他の人が言っているように、クロスオリジンドメインから読み込むことでキャンバスを「汚染」しています。

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

ただし、次のように設定するだけでこれを防ぐことができます。

img.crossOrigin = "Anonymous";

これは、リモート サーバーが次のヘッダーを適切に設定している場合にのみ機能します。

Access-Control-Allow-Origin "*"

Dropbox ファイル選択「直接リンク」オプションを使用する場合は、この良い例です。私はこれを出典:リモートのドロップボックスの画像URLから画像をキャンバスに取り込み、画像データをサーバーに送り返します。すべてJavaScriptで行います。

おすすめ記事