jQuery Girl
  1. jQuery Girl
  3. hml5 toDataUrl () ne fonctionne pas sur chrome
Intereting Posts
Uncaught TypeError: impossible de lire la propriété ‘ajax’ de non définie lorsque j’essaie d’envoyer des données à l’URL La liste déroulante d’amorçage se ferme lorsque vous cliquez dessus Problème d’utilisation de la fonction jQuery dans la fonction non jQuery Etat actif sur la navigation après l’actualisation de la page Ajout de données à jQuery-Flexigrid sans ajax-demande Comment utiliser JQuery pour sélectionner la nième option Quelles sont les différences actuelles entre jQuery et Prototype? Récupération de données depuis Ajax POST dans asp.net comprendre le modèle Jquery Pouvez-vous empêcher le cycle jQuery d’écraser la position absolue en ligne? Mise en surbrillance des cellules de tableau pour une seule ligne lors d’un glissement de souris CKEditor4: Rendre le texte différent de son HTML jQuery: compter les éléments visibles – problèmes d’efficacité / vitesse Envoi de données via ajax avec plusieurs entrées ayant le même nom qui est un plus cher à appeler? afficher-masquer un nœud dom ou créer-supprimer un nœud dom

hml5 toDataUrl () ne fonctionne pas sur chrome

Je fais ça: 

$('#displayBtn').click(function(){ var canvas = document.getElementById("myCanvas"); var dataUrl = canvas.toDataURL(); document.getElementById("textArea").value = dataUrl; });

Cela fonctionne très bien sur Firefox et IE, mais pas de chance avec Chrome. J’ai cherché sur Google et suis revenu avec le problème concernant les fichiers .SVG, mais je n’utilise aucun fichier SVG, mais uniquement les formats PNG et JPG. Voici un violon de mon code: http://jsfiddle.net/ykpCn/2/ Est-ce parce que j’utilise des PNG transparents? Pas sûr de ce que je fais mal. Très nouveau en HTML5, j’espère que ce n’est pas quelque chose de stupide que j’ai négligé.

Le problème est lié à l’access aux ressources d’origine croisée. L’image que vous avez rendue sur le canevas provient d’une origine différente (http://moosepi.com). Vous ne pouvez pas appeler toDataURL () sur des images d’origines différentes.

Si vous lancez vos outils de développement Google Chrome, vous le trouverez dans votre console. “Erreur non capturée: SECURITY_ERR: Exception DOM 18”. C’est le comportement attendu selon les spécifications .

Solution: 1. Hébergez les images à partir de votre serveur (peut-être en utilisant une configuration proxy). 2. Définissez l’atsortingbut CORS sur la ressource. N’oubliez pas que la source doit définir les en-têtes appropriés.

Apparemment, cela ne fonctionne que sur Chrome s’il est hébergé sur un serveur Web? Cela fonctionne bien si je télécharge sur le serveur puis le visualise à partir de là, mais ne fonctionnera pas localement. Ma question est stupide maintenant. Désolé de perdre du temps.