← 返回首页

ImageDecoder - Web APIs | MDN

Toggle sidebar

Theme

OS default
Light
Dark

English (US)

Remember language Learn more

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.

In this article

Constructor

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

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on Mar 13, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content