HTML-Canvas als gif/jpg/png/pdf erfassen?

Question

Ist es möglich, das, was in einer HTML-Leinwand angezeigt wird, als Bild oder PDF zu erfassen oder zu drucken?

Ich möchte ein Bild über Canvas generieren und aus diesem Bild eine png-Datei erstellen.

Answer 1

Die ursprüngliche Antwort bezog sich auf eine ähnliche Frage. Sie wurde überarbeitet:

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

mit dem Wert in IMG können Sie es als neues Bild wie folgt ausschreiben:

document.getElementById("existing-image-id").src = img;

oder

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

Answer 2

HTML5 bietet Canvas.toDataURL(mimetype), das in Opera, Firefox und Safari 4 beta implementiert ist. Es gibt jedoch eine Reihe von Sicherheitseinschränkungen (vor allem im Zusammenhang mit dem Zeichnen von Inhalten aus einem anderen Ursprung auf die Leinwand).

Sie brauchen also keine zusätzliche Bibliothek.

z.B..

 <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>

Theoretisch sollte dies ein Bild mit einem grünen Quadrat in der Mitte erstellen und dann dorthin navigieren, aber ich habe es nicht getestet.

Answer 3

Ich dachte mir, ich erweitere den Rahmen dieser Frage ein wenig, indem ich einige nützliche Informationen zu diesem Thema beisteuere.

Um die Leinwand als Bild zu erhalten, müssen Sie Folgendes tun:

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

Damit können Sie das Bild auf die Seite schreiben:

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

Wobei "image/png" ein Mime-Typ ist (png ist der einzige Typ, der unterstützt werden muss). Wenn Sie ein Array der unterstützten Typen haben möchten, können Sie etwas in der Art machen, wie hier:

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];
    }
}

Sie müssen diese Funktion nur einmal pro Seite ausführen - sie sollte sich während des Lebenszyklus einer Seite nicht ändern.

Wenn Sie möchten, dass der Benutzer die Datei herunterlädt, während sie gespeichert wird, können Sie wie folgt vorgehen:

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;

Wenn Sie das mit verschiedenen Mime-Typen verwenden, müssen Sie beide Instanzen von image/png ändern, aber nicht image/octet-stream. Es ist auch erwähnenswert, dass bei der Verwendung von domänenübergreifenden Ressourcen beim Rendern Ihrer Leinwand ein Sicherheitsfehler auftritt, wenn Sie versuchen, die Methode toDataUrl zu verwenden.

Answer 4

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);
}

Answer 5

Ich würde " wkhtmltopdf ". Es funktioniert einfach großartig. Es verwendet Webkit-Engine (verwendet in Chrome, Safari, etc.), und es ist sehr einfach zu bedienen:

wkhtmltopdf stackoverflow.com/questions/923885/ this_question.pdf

Das war's!

Versuchen Sie es