Bagaimana untuk Menyelesaikan Isu CanvasContext2D drawImage() dengan Onload dan CORS?

CanvasContext2D drawImage() Isu: Onload and CORS

Apabila cuba melukis imej pada kanvas sebelum mendapatkan dataURLnya, maklumat yang dikembalikan mungkin kelihatan kurang, diisi dengan banyak aksara "A". Isu ini timbul kerana keperluan untuk menunggu imej selesai dimuatkan sebelum boleh dilukis pada kanvas. Untuk membetulkan perkara ini, gunakan pengendali acara muat untuk elemen imej.

Untuk menangani isu ini, laksanakan langkah berikut:

1. Tunggu Pemuatan Imej: Sertakan pengendali acara onload untuk elemen imej. Fungsi ini akan dilaksanakan sebaik sahaja imej telah dimuatkan sepenuhnya.
2. Lukis Imej pada Kanvas: Dalam pengendali onload, cipta kanvas dan lukis imej padanya menggunakan kaedah drawImage.
3. Dapatkan DataURL: Selepas melukis imej, gunakan toDataURL untuk mendapatkan semula dataURL.

Potensi halangan adalah berkaitan dengan CORS (Perkongsian Sumber Silang Asal). Agar context.toDataURL() dan context.getImageData beroperasi dengan lancar, sumber imej mesti diperoleh dalam cara yang serasi silang asal. Jika tidak, kanvas akan ditandakan sebagai "tercemar", menghalang akses kepada data piksel. Untuk memintas perkara ini, patuhi garis panduan berikut:

1. Imej Asal Sama: Imej dari pelayan yang sama tidak menimbulkan isu.
2. Imej Luaran - Pengepala Silang Asal: Pastikan pelayan luaran yang mengehos imej mendayakan CORS dalam pengepalanya. Selain itu, tetapkan img.crossOrigin kepada "use-credentials."
3. Imej Luaran - Permintaan Tanpa Nama: Jika pelayan membenarkan permintaan tanpa nama, tetapkan img.crossOrigin kepada "tanpa nama."

Adalah penting untuk ambil perhatian bahawa pengepala CORS berasal dari pelayan. Atribut silang asal semata-mata menandakan niat anda untuk memanfaatkan CORS untuk mendapatkan semula data. Jika pelayan tidak dikonfigurasikan dengan betul, tiada penyelesaian wujud.

Dalam kes yang jarang berlaku melibatkan imej daripada sumber bercampur (pelayan sendiri dan pelayan yang mematuhi CORS), pertimbangkan untuk menggunakan pengendali peristiwa onerror. Pengendali ini akan diaktifkan apabila atribut silang asal ditetapkan kepada "tanpa nama" pada pelayan bukan CORS.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Isu CanvasContext2D drawImage() dengan Onload dan CORS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!