Javascript Girl
  1. Javascript Girl
  3. Les toiles vierges PNG / Tainted peuvent ne pas être exportées (ne pas utiliser d'images)
Intereting Posts
Module angulaire Membres privés Quelle est cette syntaxe? ; (Fonction ($, indéfini) Comment créer une table matricielle Les modèles Javascript imbriqués … est-ce possible / valide? Créer des méthodes chaînées dans node.js? Barre de progression AJAX et PHP Combien d'octets dans une chaîne JavaScript? Comment puis-je utiliser jasmine.js pour tester la sortie de la console? L'implémentation de pub / sous Javascript fonctionne pour les fonctions, mais pas les méthodes des objets Raphael ordonne des objets Comment capturer les événements du clavier 'keydown' et 'keyup' à l'écran pour les appareils tactiles Est-il possible de retirer des caractères spéciaux des noms de fichiers dans un webpack? Javascript: TypeError: … n'est pas un constructeur JavaScript: JSLint error "Le corps d'un for in doit être enveloppé dans une instruction if pour filtrer les propriétés indésirables du prototype" Comment résumer des éléments au même index dans un tableau de tableaux en un seul tableau?

Les toiles vierges PNG / Tainted peuvent ne pas être exportées (ne pas utiliser d'images)

J'essaie d'exporter un html assez simple vers la toile puis le png. Pour ce faire, j'utilise rasterizeHTML ( http://cburgmer.github.io/rasterizeHTML.js/ ). Le problème auquel je suis confronté est que je reçois un avertissement comme si je charge une image / ressource externe, mais je ne le suis pas. C'est ce que j'ai essayé:

HTML: 

<canvas height="500" width="500" id="rasterizer"></canvas>

Javascript 

 var canvas=document.getElementById("rasterizer"); rasterizeHTML.drawHTML('<div width="300px" height="300px" > <div style="width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;margin: -100px 0 0 -100px;"><div style="width: 100%;height: 100%;border-radius: 50%;position: absolute;top: 0;left: 0;margin: 0;z-index: 1;background: #e4f1ea; "> </div> <div style="border-radius: 50%;position: absolute;top: 50%;left: 50%;z-index: 3;background: #b6cfe1;width:73.997475122531%; height:73.997475122531%; margin:-36.998737561265% 0 0 -36.998737561265%"></div> </div></div>',canvas); canvas.toDataURL("image/png");

Le html rend juste 2 cercles, l'un au-dessus de l'autre. Rasterizer est capable de montrer cela dans la toile sans problème, mais alors lorsque j'essaie d'exécuter .toDataURL, je finis avec l'un des deux problèmes:

  1. Une image vierge (si c'est la première fois que je lance le code) de la même taille que le canevas.
  2. SecurityError: Impossible d'exécuter 'toDataURL' sur 'HTMLCanvasElement': les toiles contaminées peuvent ne pas être exportées.

Je ne sais pas d'idées, car cela devrait se produire avec des ressources externes, pas avec entièrement inline-d html. Quelqu'un sait pourquoi cela pourrait se produire? Merci.

Il y a des choses au travail ici:

  1. Vous devriez attendre pour rasterizeHTML.drawHTML pour terminer avant d'attendre quoi que ce soit du canevas: 

     rasterizeHTML.drawHTML('<div...', canvas, function () { var dataUrl = canvas.toDataURL("image/png"); console.log(dataUrl); });

  2. Safari & Webkit ne peut pas lire le lien une fois que HTML (en fait un SVG) a été dessiné là-bas. Voir https://github.com/cburgmer/rasterizeHTML.js/wiki/Browser-issues#wiki-webkit . Un bug a été déposé avec Chrome et Safari (encore une fois, voir le lien), mais jusque là, Firefox est tristement le seul navigateur qui vous permet de lire le formulaire.