Pourquoi canvas.toDataURL () lève-t-il une exception de sécurité?

N'ai-je pas assez dormi ou quoi? Ce code suivant

var frame=document.getElementById("viewer");
frame.width=100;
frame.height=100;

var ctx=frame.getContext("2d");
var img=new Image();
img.src="http://www.ansearch.com/images/interface/item/small/image.png"

img.onload=function() {
    // draw image
    ctx.drawImage(img, 0, 0)

    // Here's where the error happens:
    window.open(frame.toDataURL("image/png"));
}

lance cette erreur:

SECURITY_ERR: DOM Exception 18

Il n'y a aucun moyen que cela ne fonctionne pas! Quelqu'un peut-il expliquer cela, s'il vous plaît?

Dans les spécifications, il est dit:

Chaque fois que la méthode toDataURL () d'un élément canvas dont l'indicateur de nettoyage d'origine est défini sur false est appelée, la méthode doit lever une exception SECURITY_ERR.

Si l'image provient d'un autre serveur, je ne pense pas que vous puissiez utiliser toDataURL ()

La définition de l'attribut d'origine croisée sur les objets d'image a fonctionné pour moi (j'utilisais fabricjs)

    var c = document.createElement("img");
    c.onload=function(){
        // add the image to canvas or whatnot
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src='http://google.com/cat.png';

Pour ceux qui utilisent fabricjs, voici comment patcher Image.fromUrl

// patch fabric for cross domain image jazz
fabric.Image.fromURL=function(d,f,e){
    var c=fabric.document.createElement("img");
    c.onload=function(){
        if(f){f(new fabric.Image(c,e))}
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src=d;
};

Si l'image est hébergée sur un hôte qui définit soit Access-Control-Allow-Origin ou Access-Control-Allow-Credentials, vous pouvez utiliser le partage de ressources cross-origin (CORS). Voir ici (l'attribut crossorigin) pour plus de détails.

Votre autre option est que votre serveur dispose d'un point de terminaison qui récupère et diffuse une image. (par exemple http: // your_host / endpoint? url = URL ) L'inconvénient de cette approche est la latence et la récupération théoriquement inutile.

S'il y a d'autres solutions alternatives, je serais intéressé à en entendre parler.

Il semble qu'il existe un moyen d'éviter que si l'hébergement d'images est capable de fournir les en-têtes HTTP suivants pour les ressources d'image et que le navigateur prend en charge CORS:

access-control-allow-origin: *
access-control-allow-credentials: true

Il est indiqué ici: http://www.w3.org/TR/cors/#use-cases

Enfin j'ai trouvé la solution. Il suffit d'ajouter le crossOrigintroisième paramètre dans fromURLfunc

fabric.Image.fromURL(imageUrl, function (image) {
            //your logic
    }, { crossOrigin: "Anonymous" });

J'ai eu le même problème et toutes les images sont hébergées dans le même domaine ... Donc, si quelqu'un a le même problème, voici comment j'ai résolu:

J'avais deux boutons: un pour générer la toile et un autre pour générer l'image à partir de la toile. Cela n'a fonctionné que pour moi, et désolé de ne pas savoir pourquoi, quand j'ai écrit tout le code sur le premier bouton. Donc, quand je clique dessus, génère la toile et l'image en même temps ...

J'ai toujours ce problème de sécurité lorsque les codes étaient sur des fonctions différentes ... = /

J'ai pu le faire fonctionner en utilisant ceci:

Écrivez ceci sur la première ligne de votre .htaccesssur votre serveur source

Header add Access-Control-Allow-Origin "*"

Ensuite, lors de la création d'un <img>élément, procédez comme suit:

// jQuery
var img = $('<img src="http://your_server/img.png" crossOrigin="anonymous">')[0]

// or pure
var img = document.createElement('img');
img.src='http://your_server/img.png';
img.setAttribute('crossOrigin','anonymous');

Vous ne pouvez pas mettre d'espaces dans votre pièce d'identité

Mettre à jour

Je suppose que l'image est sur un serveur différent de celui sur lequel vous exécutez le script. J'ai pu dupliquer votre erreur lors de son exécution sur ma propre page, mais cela a bien fonctionné au moment où j'ai utilisé une image hébergée sur le même domaine. C'est donc lié à la sécurité - mettez l'image sur votre site. Quelqu'un sait pourquoi c'est le cas?

Si vous dessinez simplement des images sur un canevas, assurez-vous de charger les images du même domaine.

www.example.com est différent de example.com

Assurez-vous donc que vos images et l'url que vous avez dans votre barre d'adresse sont les mêmes, www ou non.

J'utilise fabric.js et je pourrais résoudre ce problème en utilisant toDatalessJSON au lieu de toDataURL:

canvas.toDatalessJSON({ format: 'jpeg' }).objects[0].src

Edit: Nevermind. Il en résulte que l'image d'arrière-plan est uniquement exportée vers JPG, sans le dessin sur le dessus, ce n'est donc pas tout à fait utile après tout.