検索

ホームページ  >  に質問  >  本文

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

<p>私のコードはローカルホストでは正常に動作しますが、Web サイトでは正常に動作しません。 </p> <p>この行 <code>.getImageData(x,y,1,1).data</code>:</p> について、コンソールからこのエラーが表示されます。 <pre class="brush:php;toolbar:false;">Uncaught SecurityError: 'CanvasRenderingContext2D' で 'getImageData' の実行に失敗しました: キャンバスはクロスオリジン データによって汚染されています。</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().上); if (this.target.nodeName!=="CANVAS")null を返します。 this.target.getContext('2d').getImageData(x,y,1,1).data を返します。 }</pre> <p><strong>注: </strong>画像 URL (src) はサブドメイン URL から来ています</p>
P粉343141633P粉343141633454日前573

全員に返信(1)返信します

  • P粉465675962

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

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

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

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

    リーリー

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

    リーリー

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

    返事
    0
  • キャンセル返事