UD5工具箱
使用教程
本教程将全面介绍如何使用 WebCodecs API 图像解码器工具，从上传图片到分析解码结果，每一步都配有详细的操作说明。
第一步：上传图片
打开工具页面后，首先会看到一个醒目的图片上传区域。你可以通过两种方式上传图片：点击上传按钮打开文件选择对话框，或者直接将图片文件从文件管理器拖拽到上传区域。工具支持 JPEG、PNG、WebP、BMP 等常见图片格式，建议上传大小不超过 10MB 的图片以获得最佳体验。上传成功后，页面会立即显示图片的预览和基础信息，包括文件名、文件大小、原始分辨率等。
如果上传的图片格式不被支持或文件已损坏，工具会显示友好的错误提示，并建议你更换图片。在选择测试图片时，建议同时准备单帧图片和动图，以便全面了解 ImageDecoder 的不同行为模式。
第二步：选择解码格式
图片上传后，格式选择器会自动识别并推荐合适的解码格式。通常情况下，自动识别的结果是准确的，无需手动调整。但如果你遇到格式识别错误的情况，可以在下拉菜单中手动选择正确的格式。格式选择器旁边会显示该格式的详细说明，包括是否支持动图、颜色深度等信息。确认格式无误后，点击开始解码按钮，ImageDecoder 将开始处理图片数据。
第三步：执行解码操作
点击开始解码后，工具会调用 ImageDecoder API 对上传的图片进行解码处理。解码过程通常在毫秒级别完成，但对于大尺寸或复杂格式的图片可能需要稍长时间。解码过程中，页面会显示加载指示器，提示用户等待。解码完成后，帧展示区域会以缩略图网格的形式显示所有解码出的帧。每个缩略图下方标注了帧序号和尺寸信息。对于单帧图片，只会显示一个缩略图。
第四步：查看帧详情
点击帧展示区域中的任意帧缩略图，右侧的解码信息面板会显示该帧的完整元数据。这些信息包括：编解码器名称和版本、解码耗时（毫秒）、输入数据字节数、输出像素格式（如 RGBA、BGRA 等）、色彩空间信息、帧的显示持续时间（仅动图有效）和帧序列号等。将鼠标悬停在缩略图上可以看到帧的预览大图。这些底层信息在使用 Canvas drawImage 时是无法获取的，是 ImageDecoder 独有的优势。
第五步：动图帧分析
如果上传的是动图，帧展示区域会显示动画的所有帧。你可以使用播放控制栏进行逐帧分析：点击上一帧和下一帧按钮逐步浏览，点击播放按钮自动播放动画，拖动进度条快速跳转到指定帧。控制栏还显示了当前帧序号、总帧数和当前帧的持续时间信息。通过逐帧分析，你可以了解动画中每帧的内容变化、帧间差异以及时间间隔分布，这对于动画优化和调试非常有价值。
第六步：导出解码结果
你可以将解码后的单帧图片导出为 PNG 格式保存到本地。在帧展示区域选择要导出的帧，然后点击导出按钮即可。导出的图片是解码后的原始像素数据，保持了最高的图像质量。你也可以将完整的解码信息（包括所有帧的元数据）导出为 JSON 格式，方便在其他工具中进行进一步分析。导出功能对于图像质量对比、编解码器性能测试等场景非常实用。