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

--- title: "ImageEncoder API：图片编码与输出管线" keywords: - ImageEncoder - WebCodecs - 位图编码 - 质量与并发 - 输出帧 description: "介绍 `ImageEncoder` 的参数与使用，将 `ImageBitmap`/`Canvas` 内容编码为指定格式与质量，结合并发与内存管理，提供示例与参考。" categories: - 应用软件 - 编程开发 --- 概述 `ImageEncoder` 允许将位图数据编码为目标格式（如 `image/webp`/`image/avif`），适合截图、导出与批处理场景。需控制质量、并发与资源释放。 示例 ```js 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/