ImageDecoder

可用性有限

此功能不是基线功能,因为它在某些最广泛使用的浏览器中无法正常工作。

安全上下文:此功能仅在安全上下文(HTTPS)中可用,在某些或所有支持的浏览器中。

实验性:这是一个实验性技术
在生产环境中使用此功能之前,请仔细查看浏览器兼容性表格

注意:此功能在专用 Web 工作线程中可用。

ImageDecoder 接口是 WebCodecs API 的一部分,提供了一种解包和解码编码图像数据的方法。

构造函数

ImageDecoder() 实验性

创建一个新的 ImageDecoder 对象。

实例属性

ImageDecoder.complete 只读 实验性

返回一个布尔值,指示编码数据是否已完全缓冲。

ImageDecoder.completed 只读 实验性

返回一个Promise,一旦 complete 为 true 则解析。

ImageDecoder.tracks 只读 实验性

返回一个ImageTrackList 对象,列出可用的轨道并提供选择要解码的轨道的方法。

ImageDecoder.type 只读 实验性

返回一个字符串,反映在构造期间配置的MIME 类型

静态方法

ImageDecoder.isTypeSupported() 实验性

指示提供的MIME 类型是否支持解包和解码。

实例方法

ImageDecoder.close() 实验性

结束所有挂起的操作并释放系统资源。

ImageDecoder.decode() 实验性

将控制消息排队以解码图像的帧。

ImageDecoder.reset() 实验性

中止所有挂起的 decode() 操作。

示例

给定一个<canvas> 元素

html
<canvas></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));

规范

规范
WebCodecs
# imagedecoder-interface

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。