Croix-de l'origine des données en HTML5 canvas

Je suis de chargement d'une image en js et de le mettre dans une toile. Après le dessin, j'ai récupérer des données images 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 tant dans Safari et Firefox, mais échoue en Chrome avec le message suivant:

Impossible d'obtenir des données d'image à partir d'une toile parce que la toile a été entachée par les croix-de l'origine des données.

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

  • double possible de context.getImageData() sur localhost?
  • Si ce n'est pas à partir d'un serveur web, vous obtenez ce problème il me semble
  • vous êtes de droite, qui a résolu le problème. Merci!
  • Et...si vous voulez faire du ski de l'origine <canvas> trucs, utilisez .crossOrigin. Voir blog.chromium.org/2011/07/...
  • En fait, ce ne devrait pas être une origine de la croix problème, puisque le js et le fichier image sont situés dans le même répertoire. Et le réglage de la crossOrigin drapeau ne fonctionne pas. Tout ce que je veux faire est d'exécuter la présente localement dans mon navigateur, mais chrome pense que ses un cross-origin resource sharing question de politique...
  • Je suis en train de vivre la même question, et je crois que c'est un bug (bien que je ne sais pas où le signaler).
  • ce qui signifie que js et de l'image dans différents dir peut être fait?Je l'ai essayer mais ça ne fonctionne pas

InformationsquelleAutor Samuel Müller | 2012-04-02
  1. 24

    Pour activer la SCRO (Cross-Origin Resource Sharing) de vos images passer l'en-tête HTTP à l'image de réponse:

    Access-Control-Allow-Origin: *

    L'origine est déterminée par le domaine et le protocole (par exemple, http et https ne sont pas les mêmes) de la page web et non pas l'emplacement du script.

    Si vous êtes en cours d'exécution localement à l'aide de file://ceci est généralement vu comme une croix de domaine en question; donc il vaut mieux passer par

    http://localhost/
    • est à droite, en utilisant le fichier:// est considéré comme une croix de domaine en question. Le même code à l'aide de file:// affiche ce message d'erreur à l'aide de http:// il fonctionne très bien. Merci.
    InformationsquelleAutor Ben Adams
  2. 10

    Pour résoudre la question du domaine de la croix avec file://, vous pouvez commencer à google chrome avec le paramètre

    --allow-file-access-from-files
    • Merci Markus! Cette solution fonctionne pour moi beaucoup plus rapide. Pour expliquer un peu, vous avez besoin à la sortie de chrome d'abord, et si vous êtes en cours d'exécution sur Mac, ouvrir un terminal et exécuter open /Applications/Google\ Chrome.app --args --allow-file-access-from-files commande
    InformationsquelleAutor Markus Madeja
  3. 7
    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';

    Espère que cette aide

    • http://profile.ak.fbcdn.net/crossdomain.xml n'est pas une valeur valide pour le crossorigin attribut et crossdomain.xml fichiers sont utilisés par Adobe Flash, pas de la SCRO.
    InformationsquelleAutor Gustavo Eduardo Bonilla Montoy
  4. 3
    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';

    espère que cette aide.

    InformationsquelleAutor code.rider
  5. 0

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

    HTML:

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

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

    InformationsquelleAutor Jeff Tian