UD5工具箱
常见问题
什么是 ImageDecoder API？
ImageDecoder 是 WebCodecs API 提供的图像解码接口，允许开发者在浏览器中直接解码压缩格式的图片数据。它支持 JPEG、PNG、WebP 等常见格式，能够将压缩数据解码为原始像素帧。与传统的 Canvas drawImage 方法不同，ImageDecoder 提供了更底层的控制能力，包括逐帧解码、获取解码时间、像素格式信息等。ImageDecoder 适用于需要精确控制图像解码过程的场景，如图像编辑器、性能分析工具和图像质量检测等。
ImageDecoder 与 Canvas drawImage 有什么区别？
两者的主要区别在于抽象层次和控制粒度。Canvas drawImage 是高层 API，将图片绘制到画布上，开发者无法获取解码过程的详细信息。ImageDecoder 是底层 API，直接操作压缩数据的解码过程，提供帧级控制和元数据访问。具体来说，ImageDecoder 可以获取每帧的解码耗时、像素格式、色彩空间、显示持续时间等信息，而 drawImage 无法提供这些数据。此外，ImageDecoder 支持分块解码和逐帧访问，适合处理动图的帧序列分析。
ImageDecoder 支持哪些图片格式？
ImageDecoder 支持的格式取决于浏览器的实现。目前主流浏览器支持的格式包括：image/jpeg（JPEG 图片）、image/png（PNG 图片）、image/webp（WebP 图片）。部分浏览器还支持 image/bmp（BMP 图片）和 image/avif（AVIF 图片）。可以通过调用 ImageDecoder.isConfigSupported() 方法检测浏览器对特定格式的支持情况。需要注意的是，即使浏览器支持某种格式，也不意味着支持该格式的所有变体（如某些 JPEG 的特殊编码模式）。
如何用 ImageDecoder 处理动画图片？
处理动画图片的核心是逐帧解码。首先创建 ImageDecoder 实例并指定正确的编解码器，然后通过循环调用 decode() 方法并传入递增的 frameIndex 来逐帧解码。每次 decode() 调用返回一个 ImageDecodeResult 对象，包含该帧的 ImageBitmap 和元数据（如显示持续时间）。帧元数据中的 duration 属性表示该帧应该显示的时长，开发者可以据此控制动画播放的帧间间隔。通过收集所有帧的数据，可以实现动画的完整播放、逐帧分析或帧导出等功能。
ImageDecoder 相比传统方式有什么性能优势？
ImageDecoder 的性能优势主要体现在三个方面：第一，它允许分块解码，可以逐步处理大型图片而不需要一次性加载全部数据到内存；第二，它提供了精确的解码时间测量，帮助开发者识别性能瓶颈并进行针对性优化；第三，它支持直接从 ArrayBuffer 输入数据，避免了将数据转换为 Blob URL 或 Data URL 的中间步骤。此外，ImageDecoder 可以利用浏览器内置的硬件加速编解码器，在支持的设备上实现更快的解码速度。
WebCodecs API 的浏览器兼容性如何？
WebCodecs API 目前在 Chrome 94 及以上版本、Edge 94 及以上版本中得到了良好支持。Firefox 和 Safari 的支持正在积极开发中。由于 WebCodecs 是一个相对较新的 API，建议使用最新稳定版的 Chrome 或 Edge 浏览器。可以通过检查 window.ImageDecoder 是否存在来检测浏览器支持情况。对于不支持 WebCodecs 的浏览器，可以提供 Canvas drawImage 作为降级方案，但会失去底层控制能力。
使用 ImageDecoder 时需要注意哪些内存管理问题？
ImageDecoder 在解码过程中会创建 ImageBitmap 对象，这些对象占用 GPU 内存。使用完毕后应及时调用 close() 方法释放资源，避免内存泄漏。对于大批量的帧解码操作，建议逐帧处理并立即释放前一帧的资源，而不是同时保持所有帧在内存中。此外，ImageDecoder 实例本身也应该在使用完毕后关闭。在处理大尺寸图片时，建议设置合适的解码选项来控制内存使用，例如通过 progressDecode 选项实现分块解码以降低峰值内存占用。