OffscreenCanvas: transferToImageBitmap()-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: Dieses Feature ist verfügbar in Web Workers.

Die OffscreenCanvas.transferToImageBitmap()-Methode erstellt ein ImageBitmap-Objekt aus dem zuletzt gerenderten Bild des OffscreenCanvas. Das OffscreenCanvas weist ein neues Bild für sein anschließendes Rendering zu.

Syntax

js
transferToImageBitmap()

Parameter

Keine.

Rückgabewert

Ein neu zugewiesenes ImageBitmap.

Dieses ImageBitmap referenziert eine potenziell große Grafikressource, und um sicherzustellen, dass Ihre Webanwendung robust bleibt, ist es wichtig, die Zuweisung zu vieler dieser Ressourcen zu vermeiden. Aus diesem Grund ist es wichtig sicherzustellen, dass das ImageBitmap entweder verbraucht oder geschlossen wird.

Wie in den OffscreenCanvas-Beispielen beschrieben, wird durch das Übergeben dieses ImageBitmap an ImageBitmapRenderingContext.transferFromImageBitmap() das ImageBitmap-Objekt verbraucht; es referenziert die zugrunde liegende Grafikressource nicht mehr und kann nicht an andere Web-APIs übergeben werden.

Wenn Ihr Ziel ist, das ImageBitmap an andere Web-APIs weiterzugeben, die es nicht verbrauchen - zum Beispiel CanvasRenderingContext2D.drawImage() - sollten Sie es schließen, wenn Sie fertig damit sind, indem Sie ImageBitmap.close() aufrufen. Lassen Sie nicht einfach die JavaScript-Referenz auf das ImageBitmap fallen; dies würde dessen Grafikressource am Leben halten, bis der Garbage Collector das nächste Mal ausgeführt wird.

Wenn Sie transferToImageBitmap() aufrufen und nicht beabsichtigen, es an ImageBitmapRenderingContext.transferFromImageBitmap() zu übergeben, sollten Sie überlegen, ob Sie transferToImageBitmap() überhaupt aufrufen müssen. Viele Web-APIs, die ImageBitmap akzeptieren, akzeptieren auch OffscreenCanvas als Argument.

Beispiele

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

// Perform some drawing using the gl context

offscreen.transferToImageBitmap();
// ImageBitmap { width: 256, height: 256 }

// Either:
// Pass this `ImageBitmap` to `ImageBitmapRenderingContext.transferFromImageBitmap`
// or:
// Use the `ImageBitmap` with other web APIs, and call `ImageBitmap.close()`!

Spezifikationen

Specification
HTML Standard
# dom-offscreencanvas-transfertoimagebitmap-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch