CanvasContext2DdrawImage() が失敗するのはなぜですか? CORS と画像の読み込みの問題を解決するにはどうすればよいですか?

CanvasContext2DdrawImage() 問題: 画像の読み込みと CORS

dataURL を取得する前にキャンバスに画像を描画しようとすると、空の dataURL または空白のキャンバスのレンダリングが問題になる可能性があります。これは、タイミングの問題とクロスオリジン リソース共有 (CORS) の問題が原因である可能性があります。

タイミングの問題を解決するには、キャンバスに画像を描画する前に画像を完全にロードする必要があります。次のように onload イベント ハンドラーを使用します。

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

// Define a function to execute when the image loads
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);
  var dataURL = canvas.toDataURL();
  // Now, the dataURL is available for processing
  doSomething(dataURL);
};

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

さらに、キャンバス コンテキストで context.toDataURL() および context.getImageData() の機能を保証するには、CORS 準拠の方法で画像を取得する必要があります。キャンバスの「汚染」を避けるため。

• 画像がコードと同じサーバー上でホストされている場合、
• 外部サーバーからの画像の場合は、サーバーがヘッダーでクロスオリジン要求を許可していることを確認し、img.crossOrigin 属性を「use-credentials」に設定してください。
• サーバーが匿名を許可している場合リクエストの場合は、img.crossOrigin を「anonymous」に設定します。

CORS ヘッダーはサーバーによって生成されます。クロスオリジン属性は、画像データの取得に CORS が必要であることをサーバーに通知するだけです。サーバーが適切に構成されていない場合、CORS 制限をバイパスできません。

場合によっては、画像はサーバーや CORS 準拠のサーバーなど、異なるソースから取得される場合があります。このような状況では、onerror イベント ハンドラーを利用します。このイベント ハンドラーは、CORS:

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

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

をサポートしていないサーバー上でクロスオリジン属性が「匿名」に設定されている場合にトリガーされます。

以上がCanvasContext2DdrawImage() が失敗するのはなぜですか? CORS と画像の読み込みの問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。