CanvasdrawImage() が画像のレンダリングに失敗するのはなぜですか? onload と CORS の問題を解決するにはどうすればよいですか?

CanvasContext2DdrawImage() の難問: onload と CORS の障害への取り組み

問題の提示:

キャンバス ペイントの逃避行の開始、あなたは不可解な難問に直面していることに気づきます。 drawImage() を介してレンダリングされた画像は把握できず、空のデータ URL が残ります。さらに、キャンバスを表示しようとしても目に見える結果は得られず、コンソールは不気味なほど沈黙したままです。

困惑の解明:

問題の核心は時期尚早にあるあなたのキャンバスの芸術性の性質。 drawImage() がその魔法を発揮できるようにするには、まず画像の読み込みプロセスを完了する必要があります。この onLoad の必要性を和らげるために、次の戦略を採用してください:

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

// Define the onload function
img.onload = function() {
  // Canvas setup
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var context = canvas.getContext("2d");

  // Draw the image
  context.drawImage(img, 0, 0);

  // Obtain the data URL
  var dataURL = canvas.toDataURL();

  // Perform desired actions with dataURL
  doSomething(dataURL);
};

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

CORS の難題と軽減策:

toDataURL() と getImageData() の実行をシームレスにするには、クロスオリジン リソース共有 (CORS) は不可欠です。次のいずれかのシナリオを実行して、キャンバスの「汚染」を防ぎます:

• 同じサーバーのイメージのオリジン。
• 寛容な CORS ヘッダーと img.crossOrigin が「use-credentials」に設定された外部サーバー".
• img.crossOrigin が設定された匿名 CORS サーバー"anonymous".

重要な注意事項:

• CORS ヘッダーはサーバーから生成され、クロスオリジン属性は CORS の使用を要求するだけです。
• IE と Safari はクロスオリジンをサポートしていません属性.

エッジ ケース: 画像ソースの不一致:

画像が同じサーバーと CORS 準拠のソースの混合から生成されている場合は、次の利用を検討してください。 onerror イベントハンドラー。 CORS 以外のサーバーにクロスオリジンを「匿名」として割り当て、エラーをリッスンします。

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

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