getImageData() エラーを解決します: キャンバスがクロスドメイン データによって汚染されています

Question

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

この行 .getImageData(x,y,1,1).data:

について、コンソールからこのエラーが表示されます。

Uncaught SecurityError: 'CanvasRenderingContext2D' で 'getImageData' の実行に失敗しました: キャンバスはクロスオリジン データによって汚染されています。

私のコードの一部:

jQuery.Event.prototype.rgb=function(){
        var x = this.offsetX || (this.pageX - $(this.target).offset().left),y = this.offsetY || (this.pageY - $(this.target).offset().上）;
        if (this.target.nodeName!=="CANVAS")null を返します。
        this.target.getContext('2d').getImageData(x,y,1,1).data を返します。
    }

注: 画像 URL (src) はサブドメイン URL から来ています

Answer 1

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

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

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

リーリー

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

リーリー

ダイレクト リンク オプションを使用する場合の Dropbox ファイル ピッカーこれは良い例です。私は oddprints.com でこれを使用して、リモート ドロップボックスの画像 URL から画像をキャンバスに吸い込み、画像データをサーバーに送信します。すべてJavaScriptで書かれています