Bagaimana untuk Mengelakkan Ralat \"Kanvas telah dicemari oleh data rentas asal\" dalam getImageData()?

Cara Mengelakkan Ralat "Kanvas telah dicemari oleh data asal silang" dalam getImageData()

Apabila menggunakan getImageData( ) kaedah untuk mendapatkan semula data piksel daripada kanvas, anda mungkin menghadapi ralat "Kanvas telah dicemari oleh data silang asal." Ralat ini berlaku apabila anda cuba mengakses data piksel pada kanvas yang telah dipengaruhi oleh data yang dimuatkan daripada domain lain.

Untuk memahami punca ralat ini, pertimbangkan kotak pasir keselamatan yang dilaksanakan dalam kebanyakan penyemak imbas. Secara lalai, penyemak imbas mengehadkan komunikasi antara asal yang berbeza, bermakna data yang dimuatkan daripada satu domain tidak boleh digunakan oleh domain yang berbeza. Jika elemen kanvas tercemar dengan data daripada asal yang berbeza, ia dianggap "tercemar".

Satu cara biasa untuk mengotorkan kanvas ialah dengan memuatkan imej daripada URL subdomain, seperti yang anda nyatakan dalam kod anda. Untuk mengelakkan ralat ini, terdapat beberapa pilihan:

1. Tetapkan Atribut "crossOrigin"

Tetapkan atribut "crossOrigin" kepada elemen imej dengan nilai yang sesuai:

<img src="https://subdomain.example.com/image.png" crossOrigin="Anonymous">

Ini membolehkan skrip anda mengakses data piksel daripada imej , dengan mengandaikan pelayan jauh menetapkan pengepala CORS yang sesuai.

2. Pastikan Pengepala CORS Ditetapkan

Pada pelayan jauh yang menyajikan imej, pastikan ia menghantar pengepala CORS berikut:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Content-Type

Pengepala ini memberikan akses silang asal kepada skrip anda dan benarkan ia mendapatkan semula data imej daripada kanvas.

3. Gunakan Pelayan Proksi

Jika menetapkan pengepala CORS pada pelayan jauh tidak dapat dilaksanakan, anda boleh menggunakan pelayan proksi untuk memintas sekatan silang asal. Pelayan proksi bertindak sebagai perantara antara skrip anda dan pelayan jauh, memudahkan pemindahan data antara asal yang berbeza.

Dengan melaksanakan salah satu daripada penyelesaian ini, anda boleh menghalang "Kanvas telah dicemari oleh silang- data asal" ralat dalam getImageData() dan akses data piksel daripada imej yang dimuatkan daripada domain berbeza.

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Ralat \"Kanvas telah dicemari oleh data rentas asal\" dalam getImageData()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!