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

Question

N’ai-je pas assez sommeil ou quoi ? Ce code suivant

Jette cette erreur :

Il n’y a aucun moyen, que cela ne devrait pas fonctionner ! Peut quelqu'un expliquer cela, s’il vous plaît ?

Answer 1

Dans la fiche il est dit :

Chaque fois qu’on appelle la méthode toDataURL() d’un élément de la toile sous le pavillon duquel origine-clean est défini sur false, la méthode doit lever une exception SECURITY_ERR.

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

Answer 2

La définition d’attribut de la Croix d’origine sur les objets de l’image a fonctionné pour moi (j’ai été en utilisant fabricjs)

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

Answer 3

Si l'image est hébergée sur un ordinateur hôte qui définit soit de Access-Control-Allow-Origin ou Access-Control-Allow-les informations d'Identification, vous pouvez utiliser de la Croix-Origin Resource sharing (SCRO). Voir ici (la crossorigin attribut) pour plus de détails.

Votre autre option est de votre serveur pour avoir un point de terminaison qui récupère et sert une image. (eg. http://your_host/endpoint?url=URL) L'inconvénient de cette approche étant de latence et théoriquement inutile de la chercher.

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

Answer 4

Semble il n’y a aucun moyen d’empêcher que si l’hébergeur est en mesure de fournir les en-têtes HTTP suivants pour les ressources de l’image et le navigateur prend en charge la SCRO :

Access-control-allow-origin : * -contrôle-permettre-identifiants : vrai

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

Answer 5

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'ai eu deux boutons: l'un pour générer de la toile et un autre pour générer l'image de la toile. Il n'a travaillé que pour moi, et désolé que je ne sais pas pourquoi, quand j'ai écrit tout le code sur le premier bouton. Alors, quand je clique il génère de la toile et l'image en même temps...

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