Comment éviter l'erreur « Le canevas a été entaché par des données d'origine croisée » dans getImageData()

Lors de l'utilisation de getImageData( ) pour récupérer les données de pixels d'un canevas, vous pouvez rencontrer l'erreur « Le canevas a été contaminé par des données d'origine croisée. » Cette erreur se produit lorsque vous tentez d'accéder à des données de pixels sur un canevas qui a été affecté par des données chargées à partir d'un autre domaine.

Pour comprendre la cause de cette erreur, considérez le bac à sable de sécurité implémenté dans la plupart des navigateurs. Par défaut, les navigateurs limitent la communication entre différentes origines, ce qui signifie que les données chargées depuis un domaine ne peuvent pas être utilisées par un autre domaine. Si un élément de canevas est contaminé par des données provenant d'une origine différente, il est considéré comme « entaché ».

Une façon courante de corrompre un canevas consiste à charger une image à partir d'une URL de sous-domaine, comme vous l'avez mentionné dans votre code. Pour éviter cette erreur, il existe plusieurs options :

1. Définissez l'attribut "crossOrigin"

Attribuez l'attribut "crossOrigin" à l'élément d'image avec la valeur appropriée :

Cela permet à votre script d'accéder aux données de pixels de l'image, en supposant que le serveur distant définit les en-têtes CORS appropriés.

2. Assurez-vous que les en-têtes CORS sont définis

Sur le serveur distant qui dessert l'image, assurez-vous qu'il envoie les en-têtes CORS suivants :

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

Ces en-têtes accordent un accès multi-origine à votre script et lui permettent de récupérer des données d'image à partir du canevas.

3. Utiliser un serveur proxy

Si la définition des en-têtes CORS sur le serveur distant n'est pas possible, vous pouvez utiliser un serveur proxy pour contourner la restriction d'origine croisée. Un serveur proxy fait office d'intermédiaire entre votre script et le serveur distant, facilitant le transfert de données entre différentes origines.

En implémentant l'une de ces solutions, vous pouvez éviter le message "Le canevas a été contaminé par des erreurs croisées". erreur d'origine des données" dans getImageData() et accédez aux données de pixels à partir d'images chargées à partir de différents domaines.