Comment réparer getImageData() erreur de La toile a été entachée par la croix-données sur l'origine?

Comme d'autres l'ont dit vous êtes "altération" de la toile par le chargement à partir d'une croix origines de domaine.

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

Cependant, vous pouvez être en mesure d'empêcher cela en définissant simplement:

img.crossOrigin = "Anonymous";

Cela ne fonctionne que si le serveur distant définit l'en-tête suivant de façon appropriée:

Access-Control-Allow-Origin "*"

La Dropbox sélecteur de fichier lors de l'utilisation du "lien direct" est un bon exemple de cela. Je l'utilise sur oddprints.com à hoover images à partir de la télécommande dropbox url de l'image, dans ma toile, et ensuite soumettre les données d'image sur mon serveur. Tous en javascript

Vous ne serez pas en mesure de dessiner des images directement à partir d'un autre serveur dans une zone de dessin, puis utiliser getImageData. C'est un problème de sécurité et la toile sera considéré comme "corrompus".

Serait-il travailler pour vous pour enregistrer une copie de l'image sur votre serveur à l'aide de PHP et ensuite il suffit de charger la nouvelle image? Par exemple, vous pouvez envoyer l'URL du script PHP et de l'enregistrer sur votre serveur, puis retourner le nouveau nom de fichier dans votre javascript comme ceci:

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

  $url=$_GET['url'];
  $img = file_get_contents($url);
  $fn = substr(strrchr($url, "/"), 1);
  file_put_contents($fn,$img);
  echo $fn;

?>

Que vous souhaitez utiliser le script PHP avec ajax javascript comme ceci:

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 getImageData sur la toile après que, cela fonctionnera très bien.

Alternativement, si vous ne voulez pas sauvegarder l'ensemble de l'image, vous pouvez passer x & y les coordonnées de votre script PHP, et de calculer le pixel de valeur rgba sur le côté. Je pense qu'il y a de bonnes bibliothèques pour faire ce genre de traitement d'image en PHP.

Si vous souhaitez utiliser cette approche, laissez-moi savoir si vous avez besoin d'aider à les mettre en œuvre.

edit: jette un coup d'oeil a souligné que le script php est exposé et permet à l'internet pour éventuellement l'utiliser à des fins malveillantes. il ya un million de façons de gérer cette situation, l'un des plus simple étant une sorte de URL de la dissimulation de l'... je pense sécurisé php pratiques mérite une google ;P

Vous êtes "altération" de la toile par le chargement à partir d'une croix origines de domaine. Découvrez ce MDN article:

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

Lorsque l'on travaille sur local ajouter un serveur

J'ai eu un problème similaire lors du travail local. Vous url va être le chemin d'accès vers le fichier local par exemple file:///Users/PeterP/Desktop/folder/index.html.

Veuillez noter que je suis sur un MAC.

Je suis ronde par l'installation de serveur http à l'échelle mondiale. https://www.npmjs.com/package/http-server

Suit:

1. D'installation globale: npm install http-server -g
2. Serveur: http-server ~/Desktop/folder/

PS: je suppose que vous avez nœud installé, sinon on ne pourra pas aller très loin l'exécution de mnp commandes.

Je rencontre le même problème aujourd'hui, et de le résoudre par le code de la façon suivante.

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 contre-problème de domaine.