CSS, HTML & Javascript mit {stil}

Javascript Canvas toBlob

canvas.toBlob erweitert die Techniken zum Umwandeln der Zeichnung im Canvas. Ein Blob kann als URL für ein a-Element oder als src-Attribut eines img-Tags eingesetzt werden und die Daten können dem Benutzer zum Download angeboten werden.

Inhalt eines Canvas als Bild laden

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.

Kriterium canvas.toDataURL() canvas.toBlob()
Ausgabeformat Base64-String (data:image/png;base64,...) Binäres Blob-Objekt
Größe der Daten Meist größer (wegen Base64-Overhead) Effizienter (kleiner)
Speichern / Upload Umständlicher (Base64 muss konvertiert werden) Direkt als Datei/Blob verwendbar
Kompatibilität Breite Unterstützung überall Ältere Browser (< Edge 18) brauchen Fallback
Performance Langsamer bei großen Bildern Schneller, asynchron
Synchron / Async Synchron (blockierend!) Asynchron (besser für große Datenmengen)

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.

Suchen auf mediaevent.de