ImageDecoder: decode() method

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Note: This feature is available in Dedicated Web Workers.

The decode() method of the ImageDecoder interface enqueues a control message to decode the frame of an image.

Syntax

js
decode()
decode(options)

Parameters

options Optional

An object containing the following members:

frameIndex Optional

An integer representing the index of the frame to decode. Defaults to 0 (the first frame).

completeFramesOnly Optional

A boolean defaulting to true. When true, the Promise returned by the method resolves only when the image is fully decoded. When false, the method will return a new Promise that may resolve with a partially decoded image. The method can be called repeatedly until result.complete is true, with each step providing an image with the next available level of detail.

Return value

A promise that resolves with an object containing the following members:

image

A VideoFrame containing the decoded image.

complete

A boolean, if true indicates that image contains the final full-detail output.

Exceptions

If an error occurs, the promise will resolve with following exception:

InvalidStateError DOMException

Returned if any of the following conditions apply:

  • close is true, meaning close() has already been called.
  • The requested frame does not exist.

Examples

Synchronous decoding of a completed image frame

The following example decodes the second frame (at index 1) and prints the resulting VideoFrame to the console.

js
let result = await imageDecoder.decode({ frameIndex: 1 });
console.log(result.image);

Partial decoding of a progressive image frame

The following example decodes the first frame repeatedly until its complete:

js
let complete = false;
while (!complete) {
  // The promise returned by `decode()` will only resolve when a new
  // level of detail is available or the frame is complete. I.e.,
  // calling `decode()` in a loop like this won't needlessly spin.
  let result = await imageDecoder.decode({ completeFramesOnly: false });

  // Do something with `result.image`.

  complete = result.complete;
}

Specifications

Specification
WebCodecs
# dom-imagedecoder-decode

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
decode
Chrome – Full support
Chrome 94 (Release date: 2021-09-21)
footnote Full support
Edge – Full support
Edge 94 (Release date: 2021-09-24)
footnote Full support
Firefox – Full support
Firefox 133 (Release date: 2024-11-26)
footnote Full support
Opera – Full support
Opera 80 (Release date: 2021-10-05)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – Full support
Chrome Android 94 (Release date: 2021-09-21)
footnote Full support
Firefox for Android – Full support
Firefox for Android 133 (Release date: 2024-11-26)
footnote Full support
Opera Android – Full support
Opera Android 66 (Release date: 2021-12-15)
footnote Full support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – Full support
Samsung Internet 17 (Release date: 2022-05-04)
footnote Full support
WebView Android – Full support
WebView Android 94 (Release date: 2021-09-21)
footnote Full support
WebView on iOS – No support
WebView on iOS
footnote No support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support