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.

In diesem Artikel

Syntax

transferToImageBitmap()

Parameter

Keine.

Rückgabewert

Ein neu zugewiesenes ImageBitmap.

Ausnahmen

InvalidStateError DOMException

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

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()`!

Die Schnittstelle, die diese Methode definiert, OffscreenCanvas
ImageBitmapRenderingContext.transferFromImageBitmap

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Canvas API
OffscreenCanvas
Konstruktor
1. OffscreenCanvas()
Instanzeigenschaften
1. height
2. width
Instanzmethoden
Events
1. contextlost
2. contextrestored
Vererbung
1. EventTarget
Verwandte Seiten für Canvas API
Anleitungen
1. Manipulation von Video mit Canvas
Anleitung
1. Canvas-Leitfaden
2. Grundlegende Verwendung von Canvas
3. Zeichnen von Formen mit Canvas
4. Anwenden von Stilen und Farben
5. Zeichnen von Text
6. Verwendung von Bildern
7. Transformationen
8. Compositing und Clipping
9. Grundlegende Animationen
10. Fortgeschrittene Animationen
11. Pixelmanipulation mit dem Canvas
12. Optimierung der Leinwand
13. Finale