OffscreenCanvas: convertToBlob()-Methode

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die Methode OffscreenCanvas.convertToBlob() erstellt ein Blob-Objekt, das das im Canvas enthaltene Bild repräsentiert.

Das gewünschte Dateiformat und die Bildqualität können angegeben werden. Wenn das Dateiformat nicht angegeben ist oder das angegebene Format nicht unterstützt wird, werden die Daten als image/png exportiert. Browser müssen image/png unterstützen; viele werden zusätzliche Formate unterstützen, einschließlich image/jpeg und image/webp.

Das erstellte Bild hat eine Auflösung von 96 dpi für Dateiformate, die Metadaten zur Kodierungsauflösung unterstützen.

Syntax

js
convertToBlob()
convertToBlob(options)

Parameter

options Optional

Ein Objekt mit folgenden Eigenschaften:

type

Ein String, der das Bildformat angibt. Der Standardtyp ist image/png; dieses Bildformat wird auch verwendet, wenn der angegebene Typ nicht unterstützt wird.

quality

Eine Number zwischen 0 und 1, die die Bildqualität angibt, die beim Erstellen von Bildern mit Dateiformaten verwendet werden soll, die verlustbehaftete Komprimierung unterstützen (wie image/jpeg oder image/webp). Ein Benutzeragent verwendet seinen Standardqualitätswert, wenn diese Option nicht angegeben ist oder wenn die Zahl außerhalb des zulässigen Bereichs liegt.

Rückgabewert

Ein Promise, das ein Blob-Objekt zurückgibt, das das im Canvas enthaltene Bild darstellt.

Ausnahmen

Das Promise kann mit den folgenden Ausnahmen abgelehnt werden:

InvalidStateError DOMException

Das OffscreenCanvas ist nicht abgetrennt; mit anderen Worten, es ist noch mit dem DOM und nicht mit dem aktuellen Worker verbunden.

SecurityError DOMException

Der Canvas-Kontextmodus ist 2d und das Bitmap ist nicht origin-clean; mindestens ein Teil seines Inhalts wurde oder könnte von einer anderen Website geladen worden sein als von derjenigen, von der das Dokument selbst geladen wurde.

IndexSizeError DOMException

Das Canvas-Bitmap enthält keine Pixel (entweder die horizontale oder die vertikale Dimension ist null).

EncodingError DOMException

Das Blob konnte aufgrund eines Kodierungsfehlers nicht erstellt werden.

Beispiele

js
const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

// Perform some drawing using the gl context

offscreen.convertToBlob().then((blob) => console.log(blob));
// Blob { size: 334, type: "image/png" }

Spezifikationen

Specification
HTML Standard
# dom-offscreencanvas-converttoblob-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch