it-swarm.com.de

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

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

Ich möchte ein Bild über die Leinwand generieren und in der Lage sein, aus diesem Bild eine PNG zu generieren.

674
Parand

Hoppla. Die ursprüngliche Antwort betraf eine ähnliche Frage. Dies wurde überarbeitet:

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

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

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

HTML5 bietet Canvas.toDataURL (Mimetype), das in Opera, Firefox und Safari 4 Beta implementiert ist. Es gibt jedoch eine Reihe von Sicherheitsbeschränkungen (hauptsächlich im Zusammenhang mit dem Zeichnen von Inhalten aus einem anderen Origin auf die Zeichenfläche).

Sie benötigen 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 erstellen und dann zu einem Bild mit einem grünen Quadrat in der Mitte navigieren, aber ich habe es nicht getestet.

112
olliej

Ich dachte, ich würde den Umfang dieser Frage ein wenig erweitern, mit einigen nützlichen Kleinigkeiten in dieser Angelegenheit.

Um die Leinwand als Bild zu erhalten, müssen Sie folgende Schritte ausführen:

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

Sie können dies verwenden, um das Bild auf die Seite zu schreiben:

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

Wobei "image/png" ein MIME-Typ ist (png ist der einzige, der unterstützt werden muss). Wenn Sie ein Array der unterstützten Typen haben möchten, können Sie folgende Aktionen ausführen:

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 dies nur einmal pro Seite ausführen - es sollte sich niemals während des Lebenszyklus einer Seite ändern.

Wenn Sie möchten, dass der Benutzer die Datei beim Speichern herunterlädt, können Sie Folgendes tun:

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 dies mit verschiedenen MIME-Typen verwenden, müssen Sie beide Instanzen von image/png ändern, jedoch nicht den image/octet-stream. Erwähnenswert ist auch, dass bei Verwendung domänenübergreifender Ressourcen beim Rendern des Erstellungsbereichs ein Sicherheitsfehler auftritt, wenn Sie versuchen, die toDataUrl-Methode zu verwenden.

41
meiamsome
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);
}
32

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

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

Das ist es!

Probieren Sie es aus

21
lepe

Hier ist einige Hilfe, wenn Sie den Download über einen Server durchführen (auf diese Weise können Sie Ihre Datei benennen/konvertieren/nachbearbeiten/etc):

-Veröffentlichung von Daten mit toDataURL

-Stellen Sie die Überschriften ein

$filename = "test.jpg"; //or png
header('Content-Description: File Transfer');
if($msie = !strstr($_SERVER["HTTP_USER_AGENT"],"MSIE")==false)      
  header("Content-type: application/force-download");else       
  header("Content-type: application/octet-stream"); 
header("Content-Disposition: attachment; filename=\"$filename\"");   
header("Content-Transfer-Encoding: binary"); 
header("Expires: 0"); header("Cache-Control: must-revalidate"); 
header("Pragma: public");

-Bild erstellen

$data = $_POST['data'];
$img = imagecreatefromstring(base64_decode(substr($data,strpos($data,',')+1)));

- Bild exportieren als JPEG

$width = imagesx($img);
$height = imagesy($img);
$output = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($output,  255, 255, 255);
imagefilledrectangle($output, 0, 0, $width, $height, $white);
imagecopy($output, $img, 0, 0, 0, 0, $width, $height);
imagejpeg($output);
exit();

-oder als transparentes PNG

imagesavealpha($img, true);
imagepng($img);
die($img);
15
user669677

Eine andere interessante Lösung ist PhantomJS . Es ist ein kopfloses WebKit, das mit JavaScript oder CoffeeScript ausgeführt werden kann.

Ein Anwendungsfall ist die Bildschirmaufnahme: Sie können programmgesteuert Webinhalte wie SVG und Canvas erfassen und/oder Website-Screenshots mit Miniaturansicht erstellen.

Der beste Einstiegspunkt ist die Screenshot Wiki-Seite.

Hier ist ein gutes Beispiel für eine Polaruhr (von RaphaelJS):

>phantomjs rasterize.js http://raphaeljs.com/polar-clock.html clock.png

Möchten Sie eine Seite in ein PDF rendern?

> phantomjs rasterize.js 'http://en.wikipedia.org/w/index.php?title=Jakarta&printable=yes' jakarta.pdf
9
Cybermaxs

Wenn Sie jQuery verwenden, was viele Leute tun, würden Sie die akzeptierte Antwort folgendermaßen implementieren:

var canvas = $("#mycanvas")[0];
var img = canvas.toDataURL("image/png");

$("#elememt-to-write-to").html('<img src="'+img+'"/>');
3
Pattle

Sie können jspdf verwenden, um eine Leinwand in ein Bild oder eine PDF-Datei wie folgt einzufangen:

var imgData = canvas.toDataURL('image/png');              
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');

Weitere Informationen: https://github.com/MrRio/jsPDF

1
ferralucho