"ImageEncoder API：图片编码与输出管线"

---

title: "ImageEncoder API：图片编码与输出管线"

keywords:

• ImageEncoder
• WebCodecs
• 位图编码
• 质量与并发
• 输出帧

description: "介绍 ImageEncoder 的参数与使用，将 ImageBitmap/Canvas 内容编码为指定格式与质量，结合并发与内存管理，提供示例与参考。"

categories:

• 应用软件
• 编程开发

---

概述

ImageEncoder 允许将位图数据编码为目标格式（如 image/webp/image/avif），适合截图、导出与批处理场景。需控制质量、并发与资源释放。

示例

const encoder = new ImageEncoder({ type: 'image/webp', quality: 0.8 })
const { encodedData } = await encoder.encode(imageBitmap)
// 保存为 Blob
const blob = new Blob([encodedData], { type: 'image/webp' })

工程建议

• 质量与体积：设置合适的 quality；根据用途选择格式与色彩空间。
• 并发与资源：限制并发编码数量；及时释放 ImageBitmap 与中间缓冲。
• 兼容：不支持时回退到 canvas.toBlob() 或服务端编码。

参考与验证

• MDN WebCodecs 文档（ImageEncoder）：https://developer.mozilla.org/docs/Web/API/ImageEncoder
• web.dev WebCodecs 文章：https://web.dev/articles/webcodecs
• Chrome 媒体文档：https://developer.chrome.com/docs/web-platform/webcodecs/