Mengapakah `canvas.toDataURL()` Melemparkan Pengecualian Keselamatan dengan Imej Silang Asal?

Mengapa canvas.toDataURL() Mencetuskan Pengecualian Keselamatan Semasa Mengambil Imej Silang Asal?

Apabila cuba melaksanakan canvas.toDataURL( ) pada elemen kanvas HTML5 yang mengandungi imej yang diambil daripada sumber silang asal, anda mungkin menghadapi ralat "SECURITY_ERR: DOM Exception 18". Ini berlaku disebabkan oleh sekatan keselamatan yang dikenakan oleh penyemak imbas web.

Menurut spesifikasi HTML5, kaedah toDataURL() membuang pengecualian SECURITY_ERR apabila digunakan pada elemen kanvas yang bendera "bersih asal" adalah palsu. Bendera ini ditetapkan kepada benar jika elemen kanvas mengandungi hanya sumber daripada asal yang sama dengan dokumen tempat ia berada. Dalam kes anda, memandangkan imej berasal daripada domain yang berbeza, bendera "bersih asal" ditetapkan kepada palsu.

Penyelesaian:

Malangnya, disebabkan oleh kekangan keselamatan ini, anda tidak boleh menggunakan toDataURL() untuk mendapatkan semula perwakilan PNG bagi imej silang asal. Untuk mengatasi isu ini, pertimbangkan pilihan berikut:

• Gunakan Proksi yang didayakan CORS: Sediakan proksi sebelah pelayan yang mendayakan Perkongsian Sumber Silang (CORS). Ini membolehkan anda membuat permintaan silang asal dan memintas sekatan keselamatan.
• Gunakan API Fail HTML5: Daripada menggunakan toDataURL(), manfaatkan API Fail untuk mencipta objek Fail daripada kanvas itu. Ini membolehkan anda menyimpan imej sebagai fail tanpa bergantung pada CORS.
• Gunakan Perkhidmatan Pihak Ketiga: Terokai perkhidmatan pihak ketiga yang menyediakan keupayaan mendapatkan semula imej silang asal, seperti crossOrigin .saya.

Atas ialah kandungan terperinci Mengapakah `canvas.toDataURL()` Melemparkan Pengecualian Keselamatan dengan Imej Silang Asal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!