Mengapakah Canvas drawImage() saya kosong atau diisi dengan 'A', dan bagaimana saya boleh membetulkan isu CORS semasa melukis imej luaran?

CanvasContext2D drawImage() Isu: Muatkan Imej dan Konfigurasi CORS

Apabila melukis imej pada kanvas sebelum mendapatkan dataURLnya, isu mungkin timbul apabila data yang dikembalikan kosong, mengandungi banyak aksara "A". Selain itu, imej mungkin tidak dilukis apabila kanvas dilampirkan pada dokumen.

Penyelesaian: Muatkan Acara Imej

Untuk menyelesaikan isu ini, adalah penting untuk menunggu sehingga imej dimuatkan sebelum cuba melukisnya pada kanvas. Gunakan pengendali acara beban elemen:

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";

Konfigurasi CORS untuk Akses Data Pixel

Satu lagi punca yang berpotensi ialah sekatan yang dikenali sebagai "pencemaran" kanvas. Untuk mengatasinya, konfigurasi CORS (Cross-Origin Resource Sharing) yang betul adalah penting.

• Imej asal yang sama: Tiada masalah.
• Luaran imej: Pastikan pelayan membenarkan akses silang asal dalam pengepalanya dan tetapkan img.crossOrigin kepada "use-credentials."
• Permintaan tanpa nama: Tetapkan img.crossOrigin kepada "anonymous" jika pelayan membenarkan akses tanpa nama.

Nota: Pengepala CORS dikawal oleh pelayan. Atribut silang asal hanya menunjukkan keinginan untuk menggunakan CORS. Ia tidak boleh memintas konfigurasi pelayan yang betul.

Kes Tepi: Sumber Imej Bercampur

Jika imej diperoleh daripada pelayan anda dan pelayan berdaya CORS, pertimbangkan untuk menggunakan acara onerror pengendali untuk mengendalikan imej bukan CORS.

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

Atas ialah kandungan terperinci Mengapakah Canvas drawImage() saya kosong atau diisi dengan 'A', dan bagaimana saya boleh membetulkan isu CORS semasa melukis imej luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!