Dessiner des images sur du canvas avec img.crossOrigin = "Anonymous" ne fonctionne pas

Dans une côté client autonome JS application, je suis en train de le faire donc je peux appeler toDataURL() sur un canevas sur lequel j'ai dessiné quelques images spécifié par l'URL. Ie je peux l'entrée dans une zone de texte de l'url vers une image hébergée sur, disons, imgur) que j'ai envie de dessiner sur le canevas, cliquez sur un bouton "changer" et il permettra de dessiner sur le canevas. L'utilisateur final doit être en mesure de sauver leur rendu final qu'une seule image, pour cela, je suis en utilisant toDataURL().

De toute façon, jusqu'à ce qu'ils correctif ennuyeux "l'opération est d'insécurité" erreur (gee, vous allez dire à l'utilisateur final de ce qu'ils peuvent et ne peuvent pas faire avec leurs propres données?) J'ai suivi une solution de contournement qui, dit-ajouter une image sur le DOM et l'ensemble de ses crossOrigin à la propriété "Anonmyous" et puis de dessiner sur le canevas.

Voici un travail complet version simplifiée de mon code (mais en réalité, il y aura beaucoup plus de fonctionnalités):

<!DOCTYPE html5>
<html>
<head>
<style>
#canvas {border:10px solid green;background-color:black;}
#imgbox {border:2px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width=336 height=336></canvas>
<br><br>
<input size=60 id="imgbox">
<input type="submit" value="Draw" onclick=draw()>
<script>
function draw() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = document.getElementById("imgbox").value;
    img.crossOrigin = "Anonymous";
    context.drawImage(img, 40, 40);
}
</script>
</body>
</html>

Sans img.crossOrigin = "Anonymous"; ligne, je pourrais entrée http://i.imgur.com/c2wRzfD.jpg dans la zone de texte et cliquez sur dessiner et cela fonctionne. Cependant dès que j'ai ajouté cette ligne, le tout cassé et il ne sera même pas être attirée sur la toile.

De quoi ai-je besoin de changer pour résoudre ce problème? J'ai vraiment besoin d'être en mesure de mettre en œuvre les fonctionnalités pour l'utilisateur final pour sauver leur image finale et c'est extrêmement ennuyeux que les personnes qui ont écrit la spec html5 volontairement introduit ce bug.

source d'informationauteur Joey

  1. 32

    Vous devez définir la SCRO demande avant la src - il suffit de permuter les lignes dans:

    img.crossOrigin = "Anonymous";
img.src = document.getElementById("imgbox").value;

    Vous devrez également ajouter un gestionnaire onload de l'image que le chargement est asynchrone:

    img.onload = function() {
    context.drawImage(this, 40, 40);
    //call next step in your code here, f.ex: nextStep();
};
img.crossOrigin = "Anonymous";
img.src = document.getElementById("imgbox").value;
  2. 2

    Lorsque le serveur requiert l'autorisation d'accéder aux images de la valeur doit être:

    img.crossOrigin = "Use-Credentials";

    Sinon, le navigateur va donner après avoir reçu HTTP 401.