Canvas `drawImage()` が空のデータを返すかレンダリングに失敗するのはなぜですか? `onload` と CORS を使用して修正するにはどうすればよいですか?

CanvasContext2DdrawImage() 難問: Onload と CORS

dataURL を取得する前に画像をキャンバスにペイントしようとすると、返されたデータは空で、「A」文字で埋められた文字列のように見えます。さらに、キャンバスをドキュメントに追加すると、コンソールにエラーが報告されないにもかかわらず、画像のレンダリングに失敗する場合があります。

問題の解決策

問題の根本は、画像の非同期の性質にあります。ロード中。これを解決するには、 の onload イベント ハンドラーを利用する必要があります。画像の読み込みが完了した後にのみペイント操作を実行する要素。

// Create a new image
var img = new Image();

// Define a function to execute after the image has loaded
img.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var context = canvas.getContext('2d');
  context.drawImage(img, 0, 0);

  // Now you can retrieve the dataURL
  var dataURL = canvas.toDataURL();
  doSomething(dataURL);
};

// Set the image source
img.src = "http://somerandomWebsite/picture.png";

CORS とデータ取得

context.toDataURL() メソッドと context.getImageData メソッドが正しく機能するには、画像リソースはクロスオリジン準拠の方法で取得する必要があります。そうしないと、キャンバスが「汚染」され、ピクセル データを取得しようとする試みがブロックされます。

画像がスクリプトと同じサーバーからのものであれば、問題はありません。ただし、イメージが外部サーバーに存在する場合は、適切な CORS ヘッダーを設定して、サーバーがクロスオリジン アクセスを許可していることを確認することが重要です。さらに、img.crossOrigin プロパティは、認証されたリクエストの場合は「use-credentials」に、匿名リクエストの場合は「anonymous」に設定する必要があります。

CORS ヘッダーがサーバー側で設定されることに注意することが重要です。クロスオリジン属性は、CORS を使用して画像データにアクセスするというクライアントの意図を示すだけです。サーバー構成で CORS 制限を回避できない場合、CORS 制限を回避することはできません。

特定のシナリオでは、一部の画像はサーバーでホストされ、他の画像は CORS を必要とする場合があります。これに対処するには、onerror イベント ハンドラーの使用を検討してください。このイベント ハンドラーは、CORS をサポートしていないサーバーでクロスオリジン属性が「匿名」に設定されている場合にトリガーされます。

function corsError() {
  this.crossOrigin = "";
  this.src = "";
  this.removeEventListener("error", corsError, false);
}

img.addEventListener("error", corsError, false);

以上がCanvas `drawImage()` が空のデータを返すかレンダリングに失敗するのはなぜですか? `onload` と CORS を使用して修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。