Javascript Canvas toBlob

toDataURL / toBlob

Neben canvas.toDataUL ist canvas.toBlob eine weitere Methode, um die Zeichnung auf einem HTML-Canvas-Element festzuhalten und sie z.B. als PNG oder JPG zum Download anzubieten.

toBlob setzt als Argument eine Callback-Funktion, die den Blob erzeugt. Weitere Argumente sind der Mime-Type (PNG oder JPG), und falls ein JPG erzeugt werden soll, die Qualitätsstufe des JPGs.

canvas.toBlob(callback); 
canvas.toBlob(callback, MIME type); 
canvas.toBlob(callback, MIME type, JPEG quality level); 
callback(Blob)

Per Vorgabe erzeugt toBlob ein PNG.

Der Unterschied zwischen toBlob und toDataURL(): toDataURL ist synchron und blockiert die Benutzerschnittstelle (ähnlich wie ganz ganz früher der synchrone XHR), während canvas.toBlob die eigentliche Konvertierung in ein Bild asynchron durchführt.

SVG mit einem canvas-Element als PNG laden

const svg = `<svg viewBox="0 0 800 480" 
                  width="800" height="500" 
                  xmlns="http://www.w3.org/2000/svg">
<path fill="#47383a" d="m349 … 58.7z"/>
…
// Canvas und Kontext abrufen
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// Image-Element erzeugen
var img = new Image();

// Data-URL aus SVG-Text
var svgBlob = new Blob([svg], 
              {type: 'image/svg+xml;charset=utf-8'});
var url = URL.createObjectURL(svgBlob);

// Bild laden und auf dem canvas rendern dann Blob-URL freigeben
img.onload = function() {
	ctx.drawImage(img, 0, 0);
	URL.revokeObjectURL(url);
};

// src-Attribut auf Blob-URL setzen
img.src = url;

URL.createObjectURL() erzeugt eine temporäre URL, die mit einem Blob oder einer Datei verknüpft ist. Am Ende noch den Download-Button initialisieren.

document.querySelector('#download').addEventListener('click', function() {
	canvas.toBlob(function(blob) {
		var link = document.createElement('a');
		link.href = URL.createObjectURL(blob);
		link.download = 'image.png';
		link.click();
		URL.revokeObjectURL(link.href);
	}, 'image/png');
});

URL.revokeObjectURL() gibt eine zuvor mit URL.createObjectURL() erstellte Objekt-URL frei.