\'Correction des données d'origine croisée : comment corriger l'erreur de sécurité \'getImageData()\' dans votre canevas\'

Impossible d'exécuter 'getImageData()' en raison d'une contamination des données d'origine croisée : une solution

Lors de la tentative de récupération de données de pixels à partir d'un canevas à l'aide de la méthode getImageData(), une « Uncaught SecurityError » peut survenir, indiquant que le canevas a été entaché par des données d'origine croisée. Cette erreur se produit car l'image rendue sur le canevas provient d'un domaine différent de celui du script qui tente d'y accéder.

Pour résoudre ce problème et permettre à getImageData() de fonctionner correctement, vous pouvez implémenter la solution suivante :

1. Définissez img.crossOrigin = "Anonymous":

   • Cela demande au navigateur de charger l'image d'origine croisée de manière anonyme, empêchant ainsi l'empêcher de définir des en-têtes CORS qui interdisent l'accès aux données du canevas. Le serveur hébergeant l'image d'origine croisée doit définir l'en-tête suivant dans sa réponse :
Access-Control-Allow-Origin : *

2. Cet en-tête permet au image accessible depuis n'importe quelle origine, y compris le canevas qui tente de récupérer des données de pixels.

   • Exemple de modification de code :
   • Dans votre code, modifiez la ligne de chargement de l'image pour inclure crossOrigin :


3. • En mettant en œuvre ces étapes, vous pouvez empêcher la altération des données d'origine croisée et utiliser avec succès getImageData() pour récupérer les données de pixels du canevas.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!