Mengapakah Canvas drawImage() saya gagal untuk memaparkan imej, dan bagaimanakah saya boleh menyelesaikan isu onload dan CORS?

CanvasContext2D drawImage() teka-teki: Menangani beban dan sekatan jalan CORS

Pembentangan Masalah:

Memulakan lukisan kanvas escapade , anda mendapati diri anda berhadapan dengan teka-teki yang membingungkan. Imej yang diberikan melalui drawImage() terlepas daripada genggaman anda, meninggalkan URL data kosong. Selain itu, percubaan untuk memaparkan kanvas tidak membuahkan hasil yang boleh dilihat dan konsol kekal senyap.

Menyingkap Kebingungan:

Inti isu terletak pada pramatang sifat kesenian kanvas anda. Sebelum drawImage() boleh menggunakan sihirnya, imej mesti melengkapkan proses pemuatannya terlebih dahulu. Untuk meredakan keperluan onLoad ini, pakai strategi berikut:

// 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 Conundrum and Mitigation:

Untuk memastikan kelancaran toDataURL() dan getImageData() pelaksanaan, mematuhi kepada perkongsian sumber silang (CORS) adalah penting. Cegah 'pencemaran' kanvas dengan memastikan salah satu daripada senario berikut:

• Asal imej pelayan sama.
• Pelayan luaran dengan pengepala CORS permisif dan img.crossOrigin ditetapkan kepada "guna-kredensial ".
• Pelayan CORS tanpa nama dengan img.crossOrigin ditetapkan kepada "tanpa nama".

Nota Penting:

• Pengepala CORS berasal daripada pelayan dan atribut silang asal hanya meminta penggunaan CORS.
• IE dan Safari kekurangan sokongan untuk asal silang atribut.

Kes Tepi: Percanggahan dalam Sumber Imej:

Jika imej anda berpunca daripada gabungan sumber yang mematuhi pelayan yang sama dan CORS, pertimbangkan untuk menggunakan pengendali acara onerror. Tetapkan asal silang sebagai 'tanpa nama' kepada pelayan bukan CORS dan dengarkan ralat.

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

Atas ialah kandungan terperinci Mengapakah Canvas drawImage() saya gagal untuk memaparkan imej, dan bagaimanakah saya boleh menyelesaikan isu onload dan CORS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!