Résoudre le problème de l'erreur getImageData() : le canevas est contaminé par des données inter-domaines

Question

Mon code fonctionne correctement sur localhost mais pas sur le site Web.

Je reçois cette erreur de la console, pour cette ligne .getImageData(x,y,1,1).data:

Erreur de sécurité non interceptée : échec de l'exécution de "getImageData" sur "CanvasRenderingContext2D" : le canevas a été entaché de données d'origine croisée.

Une partie de mon code :

jQuery.Event.prototype.rgb=function(){
        var x = this.offsetX || (this.pageX - $(this.target).offset().left),y = this.offsetY || (this.pageY - $(this.target).offset(). haut);
        if (this.target.nodeName!=="CANVAS") renvoie null ;
        renvoie this.target.getContext('2d').getImageData(x,y,1,1).data;
    }
Remarque : L'URL de mon image (src) provient d'une URL de sous-domaine
            

Answer 1

Comme d'autres l'ont dit, vous "polluez" le canevas en chargeant à partir d'un domaine d'origine croisée.

https://developer.mozilla.org/en-US/docs/ HTML/CORS_Enabled_Image

Cependant, vous pouvez éviter cela en définissant simplement :

img.crossOrigin = "Anonymous";

Cela ne fonctionne que si le serveur distant définit correctement les en-têtes suivants :

Access-Control-Allow-Origin "*"

Le Sélecteur de fichiers Dropbox lors de l'utilisation de l'option Direct LinkC'est un excellent exemple. Je l'utilise sur oddprints.com pour aspirer des images d'une URL d'image de boîte de dépôt distante dans mon canevas, puis soumettre les données d'image à mon serveur. Le tout écrit en JavaScript