Capture de HTML Canvas comme gif/jpg/png/pdf ?

Question

Est-il possible de capturer ou d’imprimer ce qui est affiché dans une toile de html comme une image ou un pdf ?

Je tiens à générer une image via la toile et être capable de générer une image png à partir de cette image.

Answer 1

Oups. Réponse initiale était spécifique à une question similaire. Ceci a été modifié :

la valeur de l’IMG, vous pouvez l’écrire comme une nouvelle Image comme suit :

Answer 2

HTML5 fournit Canvas.toDataURL(mimetype), qui est implémenté dans Opera, Firefox et Safari 4 beta. Il y a cependant un certain nombre de restrictions de sécurité (surtout à voir avec le contenu de dessin d’une autre origine sur la toile).

Donc vous n’avez pas une bibliothèque additionnelle, par exemple.

Théoriquement, cela devrait créer et puis accédez à une image avec un carré vert au milieu de celui-ci, mais je n’ai pas testé.

Answer 3

Je pensais étendre la portée de cette question un peu, avec quelques anecdotes sur le sujet.

Afin d'obtenir la toile comme une image, vous devez effectuer les opérations suivantes:

var canvas = document.getElementById("mycanvas");
var image = canvas.toDataURL("image/png");

Vous pouvez utiliser cette fonction pour écrire l'image à la page:

document.write('<img src="'+image+'"/>');

Où "image/png" est un type mime (png est le seul qui doit être pris en charge). Si vous souhaitez un tableau des types pris en charge que vous pouvez faire quelque chose le long des lignes de cette:

var imageMimes = ['image/png', 'image/bmp', 'image/gif', 'image/jpeg', 'image/tiff']; //Extend as necessary 
var acceptedMimes = new Array();
for(i = 0; i < imageMimes.length; i++) {
    if(canvas.toDataURL(imageMimes[i]).search(imageMimes[i])>=0) {
        acceptedMimes[acceptedMimes.length] = imageMimes[i];
    }
}

Vous n'aurez qu'à exécuter ce qu'une fois par page - il ne faut pas changer à travers une page de son cycle de vie.

Si vous souhaitez faire de l'utilisateur de télécharger le fichier qu'il est enregistré, vous pouvez effectuer les opérations suivantes:

var canvas = document.getElementById("mycanvas");
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); //Convert image to 'octet-stream' (Just a download, really)
window.location.href = image;

Si vous l'utilisez avec différents types mime, assurez-vous de modifier les deux instances de l'image/png, mais pas sur l'image/octet-stream. Il est également intéressant de noter que si vous utilisez toutes les ressources du domaine dans le rendu de votre toile, vous allez rencontrer un message d'erreur lorsque vous essayez d'utiliser la toDataUrl méthode.

Answer 4

Je voudrais utiliser «wkhtmltopdf», c’est juste excellent travail. Il utilise webkit engine (utilisé dans Chrome, Safari, etc.) et il est très facile à utiliser :

Voilà ! (Essayer)

Answer 5

Peu d’aide si vous faites du serveur de creux de téléchargement (de cette façon vous pouvez nom/convert/post-quadrichromie/etc de votre fichier) :

-Post données à l’aide``

-Définir les en-têtes

-créer l’image

-exportation d’images au format JPEG

• ou en PNG transparent