The OffscreenCanvas.transferToImageBitmap()
method creates an ImageBitmap
object from the most recently rendered image of the OffscreenCanvas
. The OffscreenCanvas
allocates a new image for its subsequent rendering.
The OffscreenCanvas.transferToImageBitmap()
method creates an ImageBitmap
object from the most recently rendered image of the OffscreenCanvas
. The OffscreenCanvas
allocates a new image for its subsequent rendering.
js
transferToImageBitmap()
None.
A newly-allocated ImageBitmap
.
This ImageBitmap
references a potentially large graphics resource, and to ensure your web application remains robust, it is important to avoid allocating too many of these resources at any point in time. For this reason it is important to ensure that the ImageBitmap
is either consumed or closed.
As described in the OffscreenCanvas
examples, passing this ImageBitmap
to ImageBitmapRenderingContext.transferFromImageBitmap()
consumes the ImageBitmap
object; it no longer references the underlying graphics resource, and can not be passed to any other web APIs.
If your goal is to pass the ImageBitmap
to other web APIs which do not consume it - for example, CanvasRenderingContext2D.drawImage()
- then you should close it when you're done with it by calling ImageBitmap.close()
. Don't simply drop the JavaScript reference to the ImageBitmap
; doing so will keep its graphics resource alive until the next time the garbage collector runs.
If you call transferToImageBitmap()
and don't intend to pass it to ImageBitmapRenderingContext.transferFromImageBitmap()
, consider whether you need to call transferToImageBitmap()
at all. Many web APIs which accept ImageBitmap
also accept OffscreenCanvas
as an argument.
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()`!
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
transferToImageBitmap |
69 | 79 | 105 | No | 56 | 16.4 | 69 | 69 | 105 | 48 | 16.4 | 10.0 |
OffscreenCanvas
ImageBitmapRenderingContext.transferFromImageBitmap
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/transferToImageBitmap