ImageDecoder
注意:此功能在专用 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 的浏览器中加载。