Mengapakah `canvas.toDataURL()` Melemparkan Pengecualian Keselamatan Apabila Memuatkan Imej dari Asal Berbeza?

Mengapa canvas.toDataURL() Melemparkan Pengecualian Keselamatan?

Apabila bekerja dengan kanvas HTML, anda mungkin menghadapi pengecualian keselamatan yang membingungkan semasa cuba mendapatkan semula URL data base64 kanvas menggunakan kaedah toDataURL(). Mari kita terokai sebab di sebalik ralat ini dan cari penyelesaian.

Kaedah toDataURL() membolehkan anda menukar kandungan kanvas menjadi rentetan berkod base64, yang boleh berguna untuk menyimpan atau berkongsi imej. Walau bagaimanapun, adalah penting untuk memahami bahawa kaedah ini menimbulkan pengecualian keselamatan jika elemen kanvas dianggap "asal-najis".

Menurut spesifikasi HTML, elemen kanvas dianggap asal-najis jika ia mengandungi imej yang dimuatkan daripada pelayan yang berbeza daripada halaman web itu sendiri. Dalam coretan kod anda, imej dimuatkan daripada "www.ansearch.com," yang merupakan asal yang berbeza daripada halaman web.

Sekatan keselamatan ini disediakan untuk mengelakkan pencemaran kandungan silang asal, di mana laman web berniat jahat boleh mengakses dan mengubah suai imej dari tapak web lain, yang menimbulkan risiko keselamatan. Oleh itu, apabila cuba menukar kanvas asal-najis kepada rentetan base64 menggunakan toDataURL(), ia akan menghasilkan pengecualian SECURITY_ERR.

Untuk menyelesaikan isu ini, anda boleh memastikan bahawa imej yang digunakan pada kanvas dimuatkan dari asal yang sama seperti halaman web. Ini bermakna mengehos imej pada pelayan anda sendiri atau menggunakan CDN yang menyajikan imej dari asal yang sama. Setelah imej dimuatkan daripada asal yang sepadan, kaedah toDataURL() harus berfungsi tanpa sebarang ralat.

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