Capture HTML Canvas as gif/jpg/png / pdf?

HTML5 fournit la Toile.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é (principalement en ce qui concerne le dessin du contenu d'une autre origine sur la toile).

donc vous n'avez pas besoin d'une bibliothèque supplémentaire.

p.ex.

 <canvas id=canvas width=200 height=200></canvas>
 <script>
      window.onload = function() {
          var canvas = document.getElementById("canvas");
          var context = canvas.getContext("2d");
          context.fillStyle = "green";
          context.fillRect(50, 50, 100, 100);
          // no argument defaults to image/png; image/jpeg, etc also work on some
          // implementations -- image/png is the only one that must be supported per spec.
          window.location = canvas.toDataURL("image/png");
      }
 </script>

théoriquement cela devrait créer et puis naviguer à une image avec un carré vert au milieu de celui-ci, mais je ne l'ai pas testé.

j'ai pensé étendre un peu la portée de cette question, avec quelques informations utiles sur la question.

pour obtenir la toile comme une image, vous devez faire ce qui suit:

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

vous pouvez utiliser ceci 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 supporté). Si vous voulez un tableau des types supportés, Vous pouvez faire quelque chose le long du des lignes de:

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'avez besoin de l'exécuter qu'une fois par page - il ne doit jamais changer à travers le cycle de vie d'une page.

si vous souhaitez que l'utilisateur télécharge le fichier tel qu'il est sauvegardé, vous pouvez faire ce qui suit:

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 utilisez cela avec différents types mime, assurez-vous de changer les deux instances d'image/png, mais pas l'image/octet-stream. Il est également intéressant de mentionner que si vous utilisez un ressources dans le rendu de votre toile, vous rencontrerez une erreur de sécurité lorsque vous tenterez d'utiliser la méthode toDataUrl.

function exportCanvasAsPNG(id, fileName) {

    var canvasElement = document.getElementById(id);

    var MIME_TYPE = "image/png";

    var imgURL = canvasElement.toDataURL(MIME_TYPE);

    var dlLink = document.createElement('a');
    dlLink.download = fileName;
    dlLink.href = imgURL;
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');

    document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);
}

je voudrais utiliser " wkhtmltopdf ". Il vient de l'excellent travail. Il utilise le moteur webkit (utilisé dans Chrome, Safari, etc.), et il est très facile à utiliser:

     wkhtmltopdf /q/capture-html-toile-comme-gif-jpg-png-pdf-62117/"http://wkhtmltopdf.org/" rel="noreferrer">