「クロスオリジン データ汚染: キャンバスの「getImageData()」セキュリティ エラーを修正する方法」

クロスオリジン データ汚染により 'getImageData()' を実行できない: 解決策

getImageData() メソッドを使用してキャンバスを編集すると、キャンバスがクロスオリジン データによって汚染されていることを示す「Uncaught SecurityError」が発生することがあります。このエラーは、キャンバス上にレンダリングされている画像が、それにアクセスしようとしているスクリプトとは異なるドメインからのものであるために発生します。

この問題を解決し、getImageData() が正しく機能できるようにするには、次の解決策を実装できます。

1. Set img.crossOrigin = "Anonymous":

   • これは、クロスオリジン画像を匿名でロードするようにブラウザに指示します。キャンバス データ アクセスを禁止する CORS ヘッダーを設定しないようにします。

2. 適切な CORS ヘッダーを確認します:

   • クロスオリジン イメージをホストするサーバーは、応答に次のヘッダーを設定する必要があります:

     • Access-Control-Allow-Origin: *
   • このヘッダーにより、ピクセル データを取得しようとしているキャンバスなど、任意のオリジンからアクセスできる画像。

3. コードの変更例:

   • コード内で、画像読み込み行を変更して、crossOrigin を含めます:

     • 

これらの手順を実装すると、クロスオリジン データの汚染を防ぎ、getImageData() を利用してキャンバスからピクセル データを取得できます。

以上が「クロスオリジン データ汚染: キャンバスの「getImageData()」セキュリティ エラーを修正する方法」の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。