Voici quelques titres basés sur des questions qui correspondent au contenu de l'article : * Comment corriger les erreurs « Tainted Canvas » lors de l'utilisation de « getImageData() » avec des images d'origine croisée ? * Pourquoi ne puis-je pas utiliser `getImageD

Dépannage de l'erreur getImageData() : toile contaminée à partir de données d'origine croisée

Arrière-plan :

Vous rencontrez l'erreur " Erreur de sécurité non détectée : échec de l'exécution de « getImageData » sur « CanvasRenderingContext2D » : le canevas a été entaché de données d'origine croisée » lors de l'utilisation de .getImageData() sur un canevas avec une image provenant d'une URL d'origine croisée.

Problème :

Le problème « d'origine croisée » se pose car le domaine de l'image est différent du domaine actuel. Cette mesure de sécurité empêche l'accès non autorisé aux ressources d'autres domaines.

Solution :

Pour résoudre le problème, vous pouvez empêcher le canevas d'être corrompu en définissant le crossOrigin de l'image. propriété sur "Anonyme":

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

Configuration côté serveur :

De plus, le serveur distant hébergeant l'image doit définir l'en-tête suivant :

Access-Control-Allow-Origin: *

Cet en-tête donne accès à l'image depuis n'importe quelle origine, lui permettant d'être chargée dans le canevas sans l'entacher.

Exemple :

Le Le sélecteur de fichiers Dropbox, lors de l'utilisation de l'option « lien direct », définit les en-têtes crossOrigin et Access-Control-Allow-Origin appropriés. Cela permet au code javascript de récupérer des images de Dropbox et de les manipuler dans un canevas sur un domaine différent.

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!