ImageDecoder API：图片解码与动画帧管线

--- title: "ImageDecoder API：图片解码与动画帧管线" keywords: - ImageDecoder - decode - VideoFrame - 动画帧 - 位图 description: "介绍 ImageDecoder 的使用与帧读取，针对静态与动画图片（如 GIF/WEBP），将解码帧转为位图或 VideoFrame 并绘制，说明性能与内存管理。" categories: - 应用软件 - 编程开发 --- 概述 ImageDecoder 提供更底层的图片解码能力，支持动画帧读取与逐帧控制。可将每帧转为 `ImageBitmap` 或 `VideoFrame` 进行绘制或后续处理，提升复杂动画与特效管线的效率。 示例 ```js const resp = await fetch('/img/anim.webp') const buf = await resp.arrayBuffer() const decoder = new ImageDecoder({ data: buf, type: 'image/webp' }) const { image, complete } = await decoder.decode({ frameIndex: 0 }) const bitmap = await createImageBitmap(image) // 绘制到画布 ctx.drawImage(bitmap, 0, 0) bitmap.close() ``` 工程建议 - 帧管理：及时释放 `ImageBitmap` 与中间缓冲；控制并发与内存占用。 - 动画控制：根据 `complete` 与帧元数据管理播放；与 `requestAnimationFrame` 协调。 - 兼容：不支持时回退到 `HTMLImageElement` 与 `drawImage`；保持功能可用。 参考与验证 - MDN ImageDecoder 文档：https://developer.mozilla.org/docs/Web/API/ImageDecoder - web.dev 相关介绍：https://web.dev/articles/image-decoder - Chrome 媒体文档：https://developer.chrome.com/docs/web-platform/webcodecs/