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

getImageData() の「キャンバスがクロスオリジン データによって汚染されています」エラーを回避する方法

getImageData( ) メソッドを使用してキャンバスからピクセル データを取得すると、「キャンバスはクロスオリジン データによって汚染されています。」というエラーが発生する場合があります。このエラーは、別のドメインからロードされたデータの影響を受けたキャンバス上のピクセル データにアクセスしようとすると発生します。

このエラーの原因を理解するには、ほとんどのブラウザに実装されているセキュリティ サンドボックスを考慮してください。デフォルトでは、ブラウザーは異なるオリジン間の通信を制限します。つまり、あるドメインからロードされたデータを別のドメインで使用することはできません。キャンバス要素が別のオリジンからのデータで汚染されている場合、その要素は「汚染されている」とみなされます。

キャンバスを汚染する一般的な方法の 1 つは、コードで述べたように、サブドメイン URL から画像を読み込むことです。このエラーを防ぐには、いくつかのオプションがあります:

1. 「crossOrigin」属性を設定します

適切な値を使用して画像要素に「crossOrigin」属性を割り当てます。

<img src="https://subdomain.example.com/image.png" crossOrigin="Anonymous">

これにより、スクリプトが画像のピクセル データにアクセスできるようになります。 、リモートサーバーが適切な CORS ヘッダーを設定していると仮定します。

2. CORS ヘッダーが設定されていることを確認します

画像を提供するリモート サーバーで、次の CORS ヘッダーが送信されていることを確認します。

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Content-Type

これらのヘッダーにより、スクリプトへのクロスオリジン アクセスが許可されます。キャンバスから画像データを取得できるようにします。

3.プロキシ サーバーを使用する

リモート サーバーで CORS ヘッダーを設定できない場合は、プロキシ サーバーを使用してクロスオリジン制限を回避できます。プロキシ サーバーは、スクリプトとリモート サーバーの間の仲介者として機能し、異なる送信元間のデータ転送を容易にします。

これらのソリューションのいずれかを実装することで、「キャンバスが相互接続によって汚染されています」という事態を防ぐことができます。 getImageData() で原点データ」エラーが発生し、別のドメインからロードされた画像のピクセル データにアクセスします。

以上がgetImageData() での「キャンバスはクロスオリジン データによって汚染されています」エラーを回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。