OffscreenCanvas: transferToImageBitmap() Methode
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2023 browserübergreifend verfügbar.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die transferToImageBitmap()-Methode der OffscreenCanvas Schnittstelle erzeugt ein ImageBitmap Objekt aus dem zuletzt gerenderten Bild des OffscreenCanvas. Das Bild im OffscreenCanvas wird durch ein neues leeres Bild für nachfolgende Renderings ersetzt.
Wenn Sie nur den aktuellen Inhalt des OffscreenCanvas in eine andere Leinwand kopieren müssen, verwenden Sie die CanvasRenderingContext2D.drawImage() Methode mit dem OffscreenCanvas als Eingabe.
Syntax
transferToImageBitmap()
Parameter
Keine.
Rückgabewert
Ein neu zugewiesenes ImageBitmap.
Ausnahmen
InvalidStateErrorDOMException-
Wird ausgelöst, wenn:
- die Leinwand in einen anderen Kontextbereich, wie z.B. einen Worker, übertragen wurde
- der Leinwand-Kontextmodus nicht durch Aufrufen von
OffscreenCanvas.getContext()festgelegt wurde.
Beschreibung
Dieses ImageBitmap referenziert eine potenziell große Grafikressource, und um sicherzustellen, dass Ihre Webanwendung stabil 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, führt das Übergeben dieses ImageBitmap an ImageBitmapRenderingContext.transferFromImageBitmap() dazu, dass das ImageBitmap-Objekt verbraucht wird; es referenziert nicht mehr die zugrunde liegende Grafikressource und kann nicht mehr an andere Web-APIs übergeben werden.
Wenn Ihr Ziel darin besteht, das ImageBitmap an andere Web-APIs weiterzugeben, die es nicht verbrauchen - zum Beispiel CanvasRenderingContext2D.drawImage() - dann sollten Sie es schließen, wenn Sie damit fertig sind, indem Sie ImageBitmap.close() aufrufen. Lassen Sie die JavaScript-Referenz zum ImageBitmap nicht einfach fallen; dadurch bleibt dessen Grafikressource bis zur nächsten Ausführung des Garbage Collectors erhalten.
Wenn Sie transferToImageBitmap() aufrufen und nicht die Absicht haben, es an ImageBitmapRenderingContext.transferFromImageBitmap() weiterzugeben, überlegen Sie, ob Sie transferToImageBitmap() überhaupt aufrufen müssen. Viele Web-APIs, die ImageBitmap annehmen, akzeptieren auch OffscreenCanvas als Argument, einschließlich CanvasRenderingContext2D.drawImage().
Beispiele
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
| Spezifikation |
|---|
| HTML # dom-offscreencanvas-transfertoimagebitmap-dev |
Browser-Kompatibilität
Siehe auch
- Die Schnittstelle, die diese Methode definiert,
OffscreenCanvas ImageBitmapRenderingContext.transferFromImageBitmap