\'Pencemaran Data Rentas Asal: Cara Membetulkan Ralat Keselamatan \'getImageData()\' dalam Kanvas Anda\'

Tidak Dapat Melaksanakan 'getImageData()' Kerana Pencemaran Data Rentas Asal: Penyelesaian

Apabila cuba mendapatkan data piksel daripada kanvas menggunakan kaedah getImageData(), "Uncaught SecurityError" mungkin timbul, menunjukkan bahawa kanvas telah dicemari oleh data silang asal. Ralat ini berlaku kerana imej yang dipaparkan pada kanvas berasal daripada domain yang berbeza daripada skrip yang cuba mengaksesnya.

Untuk menyelesaikan isu ini dan membenarkan getImageData() berfungsi dengan betul, anda boleh melaksanakan penyelesaian berikut:

1. Set img.crossOrigin = "Anonymous":

   • Ini mengarahkan penyemak imbas untuk memuatkan imej silang asal tanpa nama, menghalang ia daripada menetapkan pengepala CORS yang melarang akses data kanvas.

2. Pastikan Pengepala CORS yang Sesuai:

   • pelayan yang mengehoskan imej silang asal mesti menetapkan pengepala berikut dalam responsnya:

     • Access-Control-Allow-Origin: *
   • Pengepala ini membenarkan imej untuk diakses dari mana-mana asal, termasuk kanvas yang cuba mendapatkan semula data piksel.

3. Contoh Pengubahsuaian Kod:

   • Dalam kod anda, ubah suai baris pemuatan imej untuk memasukkan crossOrigin:

     • 

Dengan melaksanakan langkah-langkah ini, anda boleh menghalang data rentas asal tercemar dan berjaya menggunakan getImageData() untuk mendapatkan semula data piksel daripada kanvas.

Atas ialah kandungan terperinci \'Pencemaran Data Rentas Asal: Cara Membetulkan Ralat Keselamatan \'getImageData()\' dalam Kanvas Anda\'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!