Mengapakah CanvasContext2D drawImage() saya gagal, dan bagaimana saya boleh menyelesaikan isu CORS dan pemuatan imej?

CanvasContext2D drawImage() Isu: Pemuatan Imej dan CORS

Apabila cuba melukis imej pada kanvas sebelum memperoleh dataURLnya, menghadapi dataURL kosong atau pemaparan kanvas kosong boleh menjadi isu. Ini boleh dikaitkan dengan masalah pemasaan dan kebimbangan Perkongsian Sumber Silang (CORS).

Untuk menyelesaikan isu pemasaan, imej mesti dimuatkan sepenuhnya sebelum cuba melukisnya pada kanvas. Gunakan pengendali acara onload seperti berikut:

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

// Define a function to execute when the image loads
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);
  var dataURL = canvas.toDataURL();
  // Now, the dataURL is available for processing
  doSomething(dataURL);
};

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

Selain itu, untuk memastikan kefungsian context.toDataURL() dan context.getImageData() dalam konteks kanvas, imej mesti diperoleh dengan cara yang mematuhi CORS untuk mengelakkan kanvas "mencemarkan."

• Jika imej dihoskan pada pelayan yang sama dengan kod, tiada isu.
• Untuk imej daripada pelayan luaran, pastikan pelayan membenarkan permintaan silang asal dalam pengepalanya dan tetapkan atribut img.crossOrigin kepada "guna-kredensial".
• Jika pelayan membenarkan permintaan tanpa nama, tetapkan img.crossOrigin kepada "tanpa nama".

Adalah penting untuk ambil perhatian bahawa pengepala CORS dijana oleh pelayan. Atribut silang asal hanya memberitahu pelayan bahawa CORS dikehendaki untuk mendapatkan semula data imej; ia tidak boleh memintas sekatan CORS jika pelayan tidak dikonfigurasikan dengan sewajarnya.

Dalam sesetengah kes, imej mungkin datang daripada sumber yang berbeza, termasuk pelayan anda dan pelayan yang mematuhi CORS. Dalam situasi ini, gunakan 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 CanvasContext2D drawImage() saya gagal, dan bagaimana saya boleh menyelesaikan isu CORS dan pemuatan imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!