Mengapakah Kanvas saya `drawImage()` mengembalikan data kosong atau gagal untuk dipaparkan, dan bagaimana saya boleh membetulkannya menggunakan `onload` dan CORS?

CanvasContext2D drawImage() Conundrum: Onload and CORS

Dalam percubaan untuk melukis imej pada kanvas sebelum mendapatkan semula dataURLnya, pengguna mungkin menghadapi masalah apabila ia dikembalikan data kelihatan kosong, menyerupai rentetan yang diisi dengan aksara "A". Tambahan pula, penambahan kanvas pada dokumen mungkin gagal untuk memaparkan imej, manakala tiada ralat dilaporkan dalam konsol.

Penyelesaian Masalah

Punca isu terletak pada sifat imej tak segerak memuatkan. Untuk menyelesaikannya, seseorang mesti menggunakan pengendali acara onload elemen untuk melaksanakan operasi mengecat hanya selepas imej selesai dimuatkan.

// 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 dan Retrieval Data

Untuk kaedah context.toDataURL() dan context.getImageData berfungsi dengan betul, imej sumber mesti diambil dengan cara yang mematuhi rentas asal. Jika tidak, kanvas menjadi "tercemar", menyekat sebarang percubaan untuk mendapatkan semula data piksel.

Jika imej berasal dari pelayan yang sama dengan skrip anda, tiada masalah. Walau bagaimanapun, jika imej berada pada pelayan luaran, adalah penting untuk memastikan pelayan membenarkan akses silang asal dengan menetapkan pengepala CORS yang sesuai. Selain itu, sifat img.crossOrigin hendaklah ditetapkan kepada sama ada "guna-kredensial" untuk permintaan yang disahkan atau "tanpa nama" untuk permintaan tanpa nama.

Adalah penting untuk ambil perhatian bahawa pengepala CORS ditetapkan pada bahagian pelayan. Atribut silang asal hanya menunjukkan niat pelanggan untuk mengakses data imej menggunakan CORS. Mengelakkan sekatan CORS tidak mungkin jika konfigurasi pelayan melarangnya.

Dalam senario tertentu, sesetengah imej mungkin dihoskan pada pelayan anda manakala yang lain mungkin memerlukan CORS. Untuk mengendalikan perkara ini, pertimbangkan untuk menggunakan pengendali peristiwa onerror, yang dicetuskan apabila atribut silang asal ditetapkan kepada "tanpa nama" pada pelayan yang tidak menyokong CORS.

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

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

Atas ialah kandungan terperinci Mengapakah Kanvas saya `drawImage()` mengembalikan data kosong atau gagal untuk dipaparkan, dan bagaimana saya boleh membetulkannya menggunakan `onload` dan CORS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!