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

エラーの原因：キャンバスの汚染（Tainted Canvas）とは

Canvas APIでgetImageData()メソッドを使用した際に、「キャンバスがクロスオリジンデータによって汚染されています（The canvas has been tainted by cross-origin data）」というエラーが発生することがあります。

この問題は、外部ドメインから読み込んだ画像をキャンバス上に描画した場合に発生します。セキュリティ上の理由により、CORS（オリジン間リソース共有）の承認なしに読み込まれた画像を使うと、そのキャンバスは「汚染された（tainted）」状態になります。

一度キャンバスが汚染されると、getImageData()やtoDataURL()などのメソッドを使ってキャンバスからデータを取り出すことができなくなります。つまり、クロスオリジンのドメインから画像を読み込んで描画した時点で、キャンバスは汚染されてしまうのです。

解決策1：crossOrigin属性を設定する

この問題を防ぐには、画像要素にcrossOrigin属性を設定します。この属性を指定すると、外部オリジンから読み込んだ画像を、あたかも現在のオリジンから読み込んだものと同じようにキャンバスで扱えるようになります。

img.crossOrigin = "Anonymous";

具体的には、以下のように画像を読み込みます。

const img = new Image();
img.crossOrigin = "Anonymous";
img.src = "https://example.com/image.png";

img.onload = function() {
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  // getImageData()が正常に動作する
  const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
};

解決策2：サーバー側でCORSヘッダーを設定する

crossOrigin = "Anonymous"を設定しても、画像を配信しているリモートサーバー側が適切なレスポンスヘッダーを返さなければ機能しません。サーバー側では、以下のようなヘッダーを設定する必要があります。

Access-Control-Allow-Origin: *

このヘッダーにより、任意のオリジンからのアクセスが許可されます。特定のドメインのみを許可したい場合は、アスタリスク（*）の代わりにそのドメインを指定します。

注意点

• crossOrigin属性は、画像のsrcを設定する前に指定する必要があります。
• 画像サーバーがCORSヘッダーを返していない場合、画像自体の読み込みが失敗する可能性があります。その場合は、画像を自分のサーバーに配置して同一オリジンから読み込む方法も検討してください。
• ローカル環境でfile://プロトコルを使ってテストする場合も同様のエラーが発生するため、ローカルサーバー（例：https://localhost）経由で確認することをおすすめします。

まとめ

「キャンバスが汚染されています」エラーは、クロスオリジンの画像をCORS承認なしに使用したことが原因です。img.crossOrigin = "Anonymous"を設定し、かつ画像配信サーバーがAccess-Control-Allow-Originヘッダーを適切に返すようにすれば、getImageData()を含むキャンバス操作を問題なく行えるようになります。