Berikut ialah beberapa tajuk berasaskan soalan yang sesuai dengan kandungan artikel: * Bagaimana untuk Membetulkan Ralat \"Kanvas Tercemar\" Apabila Menggunakan `getImageData()` dengan Imej Silang Asal? * Mengapa Saya Tidak Boleh Menggunakan `getImageD

Menyelesaikan masalah getImageData() Ralat: Kanvas Tercemar daripada Data Silang Asal

Latar Belakang:

Anda menghadapi ralat " Uncaught SecurityError: Gagal melaksanakan 'getImageData' pada 'CanvasRenderingContext2D': Kanvas telah dicemari oleh data silang asal" apabila menggunakan .getImageData() pada kanvas dengan imej daripada URL silang asal.

Isu:

Isu "rentas asal" timbul kerana domain imej berbeza daripada domain semasa. Langkah keselamatan ini menghalang akses tanpa kebenaran kepada sumber daripada domain lain.

Penyelesaian:

Untuk menyelesaikan isu ini, anda boleh menghalang kanvas daripada tercemar dengan menetapkan crossOrigin imej harta kepada "Tanpa Nama":

var img = new Image();
img.crossOrigin = "Anonymous"; // Prevents tainting
img.src = "https://cross-origin-image.example.com/image.jpg";

Konfigurasi Bahagian Pelayan:

Selain itu, pelayan jauh yang mengehos imej mesti menetapkan pengepala berikut:

Access-Control-Allow-Origin: *

Pengepala ini memberikan akses kepada imej dari mana-mana asal, membenarkan ia dimuatkan ke dalam kanvas tanpa mencemarkannya.

Contoh:

The Pemilih fail Dropbox, apabila menggunakan pilihan "pautan langsung", menetapkan pengepala silang Asal dan Access-Control-Allow-Origin yang sesuai. Ini membenarkan kod javascript untuk mendapatkan semula imej daripada Dropbox dan memanipulasinya dalam kanvas pada domain yang berbeza.

Atas ialah kandungan terperinci Berikut ialah beberapa tajuk berasaskan soalan yang sesuai dengan kandungan artikel: * Bagaimana untuk Membetulkan Ralat \"Kanvas Tercemar\" Apabila Menggunakan `getImageData()` dengan Imej Silang Asal? * Mengapa Saya Tidak Boleh Menggunakan `getImageD. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!