HTMLCanvasElement: Methode toBlob()
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Die Methode HTMLCanvasElement.toBlob() erstellt ein Blob-Objekt, das das im Canvas enthaltene Bild repräsentiert.
Diese Datei kann nach Ermessen des User Agents auf dem Datenträger zwischengespeichert oder im Arbeitsspeicher abgelegt werden.
Das gewünschte Dateiformat und die Bildqualität können angegeben werden.
Wenn das Dateiformat nicht angegeben wird oder das angegebene Format nicht unterstützt wird, werden die Daten als image/png exportiert.
Browser müssen image/png unterstützen; viele unterstützen zusätzliche Formate, darunter image/jpeg und image/webp.
Das erstellte Bild hat eine Auflösung von 96 dpi, sofern das Dateiformat die Speicherung von Auflösungsmetadaten unterstützt.
Syntax
toBlob(callback)
toBlob(callback, type)
toBlob(callback, type, quality)
Parameter
callback-
Eine Callback-Funktion, die das resultierende
Blob-Objekt als einziges Argument erhält.nullkann übergeben werden, wenn das Bild aus irgendeinem Grund nicht erstellt werden kann. typeOptional-
Ein String, der das Bildformat angibt. Der Standardtyp ist
image/png; dieser Typ wird auch verwendet, wenn der angegebene Typ nicht unterstützt wird. qualityOptional-
Eine
Numberzwischen0und1, die die Bildqualität beim Erstellen von Bildern in Dateiformaten mit verlustbehafteter Komprimierung (wieimage/jpegoderimage/webp) angibt. Der User Agent verwendet seinen Standardwert für die Qualität, wenn diese Option nicht angegeben wird oder die Zahl außerhalb des zulässigen Bereichs liegt.
Rückgabewert
Keiner (undefined).
Ausnahmen
SecurityErrorDOMException-
Die Bitmap des Canvas ist nicht origin-clean; zumindest ein Teil ihres Inhalts wurde oder könnte von einer anderen Website geladen worden sein als der, von der das Dokument selbst geladen wurde.
Beispiele
Eine Datei aus dem Canvas erstellen
Nachdem Sie Inhalte in einen Canvas gezeichnet haben, können Sie diesen in eine Datei eines beliebigen unterstützten Bildformats umwandeln.
Das folgende Codebeispiel nimmt das Bild aus dem <canvas>-Element mit der ID „canvas“, erstellt davon eine Kopie als PNG-Bild und fügt anschließend ein neues <img>-Element zum Dokument hinzu, das dieses Bild als Quelle verwendet.
const canvas = document.getElementById("canvas");
canvas.toBlob((blob) => {
const newImg = document.createElement("img");
const url = URL.createObjectURL(blob);
newImg.src = url;
document.body.appendChild(newImg);
});
Hier wird ein PNG-Bild erstellt. Wenn Sie dem Aufruf von toBlob() einen zweiten Parameter hinzufügen, können Sie einen anderen vom User Agent unterstützten Bildtyp angeben.
So erhalten Sie das Bild beispielsweise im JPEG-Format:
canvas.toBlob(
(blob) => {
/* … */
},
"image/jpeg",
0.95,
); // JPEG at 95% quality
Beachten Sie, dass wir die Objekt-URL nicht unmittelbar nach dem Laden des Bildes widerrufen. Andernfalls wäre das Bild für Benutzerinteraktionen nicht mehr verwendbar, etwa um es per Rechtsklick zu speichern oder in einem neuen Tab zu öffnen. Bei langlebigen Anwendungen sollten Sie Objekt-URLs widerrufen, sobald sie nicht mehr benötigt werden (etwa wenn das Bild aus dem DOM entfernt wird). Rufen Sie dazu die Methode URL.revokeObjectURL() mit dem String der Objekt-URL auf, um Speicher freizugeben.
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-canvas-toblob-dev |