Résoudre le problème de l'erreur getImageData() : le canevas est contaminé par des données inter-domaines
P粉343141633
2023-08-29 12:52:11
<p>Mon code fonctionne correctement sur localhost mais pas sur le site Web. </p>
<p>Je reçois cette erreur de la console, pour cette ligne <code>.getImageData(x,y,1,1).data</code>:</p>
<pre class="brush:php;toolbar:false;">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.</pre>
<p>Une partie de mon code :</p>
<pre class="brush:php;toolbar:false;">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;
}</pré>
<p><strong>Remarque : </strong>L'URL de mon image (src) provient d'une URL de sous-domaine</p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 :
Cela ne fonctionne que si le serveur distant définit correctement les en-têtes suivants :
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