WebCodecs API 图像解码器 - 解码 JPEG/PNG 帧

WebCodecs ImageDecoder 是 Chromium 浏览器（Chrome 94+、Edge 94+）内置的低级图像解码 API，允许开发者直接从原始编码数据（JPEG、PNG、GIF、WebP、AVIF 等格式）中解码出 VideoFrame 对象。相比传统的 createImageBitmap 或 <img> 标签，它提供了更精细的控制，包括逐帧解码、颜色空间信息读取、像素格式访问等高级功能。

截至 2025 年，Google Chrome 94+、Microsoft Edge 94+、Opera 80+ 以及基于 Chromium 的浏览器均完整支持 ImageDecoder API。Firefox 和 Safari 目前尚未完全支持 WebCodecs 规范。本工具会自动检测浏览器能力，在不支持时使用 createImageBitmap 回退方案进行基础解码。

JPEG 使用有损压缩，基于 DCT（离散余弦变换），解码后像素格式通常为 YUV 相关格式（如 I420），颜色空间通常为 BT.709 或 BT.601。PNG 使用无损压缩（DEFLATE 算法），解码后通常为 RGBA/BGRA 格式，颜色空间通常为 sRGB。ImageDecoder 可以透明处理这些差异，并暴露底层的像素格式和颜色空间信息。

VideoFrame 是 WebCodecs API 中的核心对象，代表一帧解码后的视频或图像数据。它包含像素数据、显示尺寸、编码尺寸、时间戳、持续时间以及颜色空间等元信息。与 HTMLImageElement 不同，VideoFrame 是"裸"的像素缓冲区，需要手动管理生命周期（调用 close() 释放内存），但这也使得它非常适合高性能图像处理场景。

不会。所有解码操作完全在您的浏览器本地执行，图像文件不会离开您的设备。WebCodecs API 在客户端沙箱中运行，解码后的 VideoFrame 数据仅存在于内存中，刷新页面或关闭标签页后即被清除。这是本工具相比在线图像处理服务的一个重要隐私优势。

ImageDecoder 支持 JPEG、PNG、GIF（含动画）、WebP（含动画）、AVIF（含动画）、BMP 和 ICO 格式。对于动画 GIF/WebP/AVIF，本工具会自动检测帧数并启用帧导航功能，您可以逐帧浏览动画的每一帧，查看每帧的时间戳和持续时间。

颜色空间信息（原色、传输特性、矩阵系数）决定了图像像素值如何映射到实际显示颜色。例如，BT.709 是 HDTV 标准，sRGB/IEC 61966-2-1 是 Web 图像最常用的色彩空间。了解这些信息对于色彩关键的图像处理工作流（如印刷、视频后期）非常重要，可以避免色彩偏移问题。

解码速度受多个因素影响：图像分辨率（像素总数）、压缩算法复杂度、硬件加速可用性以及浏览器实现优化。JPEG 解码通常比 PNG 快（因为 JPEG 的 DCT 解码在硬件层面有优化），而高分辨率图像（如 8000×6000 像素）需要处理大量数据。本工具会显示实际解码耗时，帮助您评估性能。