ImageDecoder

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 ImageDecoder interface of the WebCodecs API provides a way to unpack and decode encoded image data.

Constructor

ImageDecoder()

Creates a new ImageDecoder object.

Instance properties

ImageDecoder.complete Read only

Returns a boolean value indicating whether encoded data is completely buffered.

ImageDecoder.completed Read only

Returns a Promise that resolves once complete is true.

ImageDecoder.tracks Read only

Returns an ImageTrackList object listing the available tracks and providing a method for selecting a track to decode.

ImageDecoder.type Read only

Returns a string reflecting the MIME type configured during construction.

Static methods

ImageDecoder.isTypeSupported()

Indicates if the provided MIME type is supported for unpacking and decoding.

Instance methods

ImageDecoder.close()

Ends all pending work and releases system resources.

ImageDecoder.decode()

Enqueues a control message to decode the frame of an image.

ImageDecoder.reset()

Aborts all pending decode() operations.

Examples

Given a <canvas> element:

html
<canvas></canvas>

the following code decodes and renders an animated image to that canvas:

js
let imageDecoder = null;
let imageIndex = 0;

function renderImage(result) {
  const canvas = document.querySelector("canvas");
  const canvasContext = canvas.getContext("2d");

  canvasContext.drawImage(result.image, 0, 0);

  const track = imageDecoder.tracks.selectedTrack;

  // We check complete here since `frameCount` won't be stable until all
  // data has been received. This may cause us to receive a RangeError
  // during the decode() call below which needs to be handled.
  if (imageDecoder.complete) {
    if (track.frameCount === 1) return;

    if (imageIndex + 1 >= track.frameCount) imageIndex = 0;
  }

  // Decode the next frame ahead of display so it's ready in time.
  imageDecoder
    .decode({ frameIndex: ++imageIndex })
    .then((nextResult) =>
      setTimeout(() => {
        renderImage(nextResult);
      }, result.image.duration / 1000.0),
    )
    .catch((e) => {
      // We can end up requesting an imageIndex past the end since
      // we're using a ReadableStream from fetch(), when this happens
      // just wrap around.
      if (e instanceof RangeError) {
        imageIndex = 0;
        imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
      } else {
        throw e;
      }
    });
}

function decodeImage(imageByteStream) {
  imageDecoder = new ImageDecoder({ data: imageByteStream, type: "image/gif" });
  imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
}

fetch("fancy.gif").then((response) => decodeImage(response.body));

Specifications

Specification
WebCodecs
# imagedecoder-interface

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ImageDecoder
ImageDecoder() constructor
close
complete
completed
decode
isTypeSupported() static method
reset
tracks
type

Legend

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

Full support
Full support
No support
No support