Canvas のdrawImage() が空であるか、「A」で埋められているのはなぜですか? 外部画像を描画するときに CORS の問題を解決するにはどうすればよいですか?

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

データ URL を取得する前にキャンバスに画像をペイントすると、問題が発生する可能性があります。返されたデータが空であり、多数の「A」文字が含まれている場合に発生します。さらに、キャンバスがドキュメントに追加されるときに画像が描画されない場合があります。

解決策: Load Image Event

この問題を解決するには、待機することが重要です。画像がロードされるまで待ってから、キャンバスにペイントしてください。 のロード イベント ハンドラーを利用します。要素:

var img = new Image();
img.onload = function() {
  var canvas = document.createElement('canvas');
  // ... code to draw the image and retrieve dataURL ...
};
img.src = "http://somerandomWebsite/picture.png";

ピクセル データ アクセスのための CORS 構成

もう 1 つの潜在的な原因は、キャンバスの「汚染」として知られる制限です。これを克服するには、正しい CORS (Cross-Origin Resource Sharing) 構成が不可欠です。

• 同一オリジン イメージ: 問題ありません。
• 外部画像: サーバーがヘッダーでクロスオリジン アクセスを許可していることを確認し、img.crossOrigin を次のように設定します。 "use-credentials."
• 匿名リクエスト: サーバーが匿名アクセスを許可する場合は、img.crossOrigin を "anonymous" に設定します。

注: CORS ヘッダーはサーバーによって制御されます。クロスオリジン属性は、単に CORS を使用したいことを示すだけです。適切なサーバー構成をバイパスすることはできません。

エッジ ケース: 混合画像ソース

画像がサーバーと CORS 対応サーバーの両方から取得されている場合は、onerror イベントの使用を検討してください。非 CORS イメージを処理するハンドラー。

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

以上がCanvas のdrawImage() が空であるか、「A」で埋められているのはなぜですか? 外部画像を描画するときに CORS の問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。