web-dev-qa-db-fra.com

Données d'origine croisée dans le canevas HTML5

Je charge une image dans js et la dessine dans une toile. Après avoir dessiné, je récupère imageData de la toile:

var img = new Image();
img.onload = function() {
    canvas.drawImage(img, 0, 0);
    originalImageData = canvas.getImageData(0,0,width, height)); //chrome fails
}
img.src = 'picture.jpeg';

Cela fonctionne parfaitement dans Safari et Firefox, mais échoue dans Chrome avec le message suivant:

Impossible d'obtenir les données d'image du canevas car le canevas a été corrompu par des données croisées.

Le fichier javascript et l'image sont situés dans le même répertoire, je ne comprends donc pas le comportement de chorme.

javascripthtml5google-chromecanvascross-domain
27
Samuel Müller

Pour activer CORS ( Partage de ressources d'origine croisée ) pour vos images, transmettez l'en-tête HTTP avec la réponse de l'image:

Access-Control-Allow-Origin: *

L’origine est déterminée par le domaine et le protocole (par exemple, http et https ne sont pas identiques) de la page Web et non par l’emplacement du script.

Si vous utilisez localement en utilisant file: //, cela est généralement considéré comme un problème interdomaine; il vaut donc mieux passer par

http://localhost/
24
Ben Adams

Pour résoudre le problème de domaine croisé avec file: //, vous pouvez démarrer chrome avec le paramètre

--allow-file-access-from-files
9
Markus Madeja
var img = new Image();
img.onload = function() {
    canvas.drawImage(img, 0, 0);
    originalImageData = canvas.getImageData(0,0,width, height)); //chrome will not fail
}
img.crossOrigin = 'http://profile.ak.fbcdn.net/crossdomain.xml';//crossdomain xml file, this is facebook example
img.src = 'picture.jpeg';

J'espère que cela t'aides

7
Gustavo Eduardo Bonilla Montoy
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.crossOrigin = "anonymous";
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  originalImageData = ctx.canvas.toDataURL();
}
img.src = 'picture.jpeg';

j'espère que cela t'aides.

2
code.rider

Si les en-têtes de réponse du serveur contiennent Access-Control-Allow-Origin: *, vous pouvez le corriger du côté client: Ajoutez un attribut à l'image ou à la vidéo.

<img src="..." crossorigin="Anonymous" />
<video src="..." crossorigin="Anonymous"></video>

Sinon, vous devez utiliser un proxy côté serveur.

0
Jeff Tian