Comment réparer l'erreur getImageData () Le canevas a été contaminé par des données d'origine croisée?

Mon code fonctionne très bien sur mon hôte local mais il ne fonctionne pas sur le site.

J'ai eu cette erreur de la console, pour cette ligne .getImageData(x,y,1,1).data:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 

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().top);
        if (this.target.nodeName!=="CANVAS")return null;
        return this.target.getContext('2d').getImageData(x,y,1,1).data;
    }

Remarque: mon URL d'image (src) provient d'une URL de sous-domaine

Comme d'autres l'ont dit, vous «souillez» le canevas en le chargeant à partir d'un domaine d'origines croisées.

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

Cependant, vous pourrez peut-être éviter cela en définissant simplement:

img.crossOrigin = "Anonymous";

Cela ne fonctionne que si le serveur distant définit correctement l'en-tête suivant:

Access-Control-Allow-Origin "*"

Le sélecteur de fichiers Dropbox lors de l'utilisation de l'option "lien direct" en est un excellent exemple. Je l'utilise sur oddprints.com pour aspirer des images de l'URL de l'image de dropbox distante, dans ma toile, puis soumettre les données d'image à mon serveur. Tout en javascript

J'ai trouvé que je devais utiliser .setAttribute('crossOrigin', '')et ajouter un horodatage à la chaîne de requête de l'URL pour éviter une réponse 304 sans en- Access-Control-Allow-Origintête.

Cela me donne

var url = 'http://lorempixel.com/g/400/200/';
var imgObj = new Image();
imgObj.src = url + '?' + new Date().getTime();
imgObj.setAttribute('crossOrigin', '');

Vous ne pourrez pas dessiner des images directement à partir d'un autre serveur dans un canevas, puis les utiliser getImageData. C'est un problème de sécurité et la toile sera considérée comme "corrompue".

Cela fonctionnerait-il pour vous d'enregistrer une copie de l'image sur votre serveur en utilisant PHP, puis de charger simplement la nouvelle image? Par exemple, vous pouvez envoyer l'URL vers le script PHP et l'enregistrer sur votre serveur, puis renvoyer le nouveau nom de fichier à votre javascript comme ceci:

<?php //The name of this file in this example is imgdata.php

  $url=$_GET['url'];

  // prevent hackers from uploading PHP scripts and pwning your system
  if(!@is_array(getimagesize($url))){
    echo "path/to/placeholderImage.png";
    exit("wrong file type.");
  }

  $img = file_get_contents($url);

  $fn = substr(strrchr($url, "/"), 1);
  file_put_contents($fn,$img);
  echo $fn;

?>

Vous utiliseriez le script PHP avec du javascript ajax comme celui-ci:

xi=new XMLHttpRequest();
xi.open("GET","imgdata.php?url="+yourImageURL,true);
xi.send();

xi.onreadystatechange=function() {
  if(xi.readyState==4 && xi.status==200) {
    img=new Image;
    img.onload=function(){ 
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    }
    img.src=xi.responseText;
  }
}

Si vous utilisez getImageDatasur la toile après cela, cela fonctionnera bien.

Alternativement, si vous ne voulez pas enregistrer l'image entière, vous pouvez passer les coordonnées x & y à votre script PHP et calculer la valeur rgba du pixel de ce côté. Je pense qu'il existe de bonnes bibliothèques pour faire ce genre de traitement d'image en PHP.

Si vous souhaitez utiliser cette approche, faites-moi savoir si vous avez besoin d'aide pour la mettre en œuvre.

edit-1: peeps a souligné que le script php est exposé et permet à Internet de l'utiliser potentiellement de manière malveillante. il existe un million de façons de gérer cela, l'une des plus simples étant une sorte d'obfuscation d'URL ... Je pense que les pratiques php sécurisées méritent un google séparé; P

edit-2: à la demande générale, j'ai ajouté une vérification pour m'assurer qu'il s'agit d'une image et non d'un script php (à partir de: PHP vérifier si le fichier est une image ).

Je voyais cette erreur pendant Chromeque je testais mon code localement. Je suis passé à Firefoxet je ne vois plus l'erreur. Peut-être que passer à un autre navigateur est une solution rapide.

Si vous utilisez la solution donnée dans la première réponse, assurez-vous d'ajouter img.crossOrigin = "Anonymous";juste après avoir déclaré la imgvariable (par exemple var img = new Image();).

Votre problème est que vous chargez une image externe, c'est-à-dire depuis un autre domaine. Cela provoque une erreur de sécurité lorsque vous essayez d'accéder aux données de votre contexte de canevas.

Vous «souillez» le canevas en le chargeant à partir d'un domaine d'origines croisées. Consultez cet article MDN:

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

Lorsque vous travaillez en local, ajoutez un serveur

J'ai eu un problème similaire en travaillant sur local. Votre URL va être le chemin vers le fichier local, par exemple file: ///Users/PeterP/Desktop/folder/index.html.

Veuillez noter que je suis sur un MAC.

J'ai contourné cela en installant le serveur http globalement. https://www.npmjs.com/package/http-server

Pas:

1. Installation globale: npm install http-server -g
2. Exécutez le serveur: http-server ~/Desktop/folder/

PS: Je suppose que vous avez installé un nœud, sinon vous n'obtiendrez pas très loin les commandes npm.

Comme le dit Matt Burns dans sa réponse , vous devrez peut-être activer CORS sur le serveur où les images problématiques sont hébergées.

Si le serveur est Apache, cela peut être fait en ajoutant l'extrait de code suivant (à partir d' ici ) à votre configuration VirtualHost ou à un .htaccessfichier:

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

... si vous l'ajoutez à un VirtualHost, vous devrez probablement également recharger la configuration d'Apache (par exemple, sudo service apache2 reloadsi Apache fonctionne sur un serveur Linux)

Mon problème était tellement compliqué que j'ai simplement encodé l'image en base64 pour m'assurer qu'il ne pouvait pas y avoir de problèmes CORS

Je rencontre le même problème aujourd'hui, et je le résolve par le code suivant.

Code HTML:

<div style='display: none'>
  <img id='img' src='img/iak.png' width='600' height='400' />
</div>
<canvas id='iak'>broswer don't support canvas</canvas>

code js:

var canvas = document.getElementById('iak')
var iakImg = document.getElementById('img')
var ctx = canvas.getContext('2d')
var image = new Image()
image.src=iakImg.src
image.onload = function () {
   ctx.drawImage(image,0,0)
   var data = ctx.getImageData(0,0,600,400)
}

code comme ci-dessus, et il n'y a pas de problème interdomaine.

J'avais le même problème, et pour moi, cela fonctionnait simplement en concaténant https:${image.getAttribute('src')}