无需登录 数据私有 本地保存

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

10
0
0
0

WebCodecs 图像解码器

使用浏览器原生 ImageDecoder API 高性能解码 JPEG / PNG / GIF / WebP / AVIF 图像帧

WebCodecs 就绪
拖放图像文件到此处

或点击选择文件 · 支持 JPEG / PNG / GIF / WebP / AVIF / BMP

也可使用 Ctrl+V 粘贴剪贴板中的图像

解码后图像将在此显示

帧 1 / 1
解码引擎
-
文件信息
文件名
-
文件大小
-
MIME 类型
-
格式检测
-
图像尺寸
显示宽度
-
显示高度
-
编码宽度
-
编码高度
-
像素总数
-
帧信息
总帧数
-
是否动画
-
重复次数
-
像素格式
-
颜色空间
原色
-
传输特性
-
矩阵系数
-
全范围
-
解码耗时
-
常见问题与知识
什么是 WebCodecs ImageDecoder API?

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

哪些浏览器支持 WebCodecs ImageDecoder?

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

JPEG 和 PNG 解码有什么区别?

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

什么是 VideoFrame?它和普通图像有什么区别?

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

解码后的图像数据会上传到服务器吗?

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

支持哪些图像格式?是否支持动画图像?

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

颜色空间信息有什么用?

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

为什么解码大图时会比较慢?

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