UD5工具箱
术语词典
本词典收录了 WebCodecs API、图像解码和编解码技术相关的核心术语和概念，帮助你深入理解图像处理的底层原理。
WebCodecs API
WebCodecs API 是浏览器提供的一组底层媒体编解码接口，允许 JavaScript 代码直接访问浏览器内置的视频和图像编解码器。它提供了一系列接口，包括 ImageDecoder（图像解码）、VideoDecoder（视频解码）、VideoEncoder（视频编码）、AudioDecoder（音频解码）和 AudioEncoder（音频编码）。WebCodecs 的核心优势在于绕过了 HTMLMediaElement 和 Canvas 等高层抽象，让开发者能够直接控制编解码的每一个步骤，实现更精细的媒体处理。
ImageDecoder
ImageDecoder 是 WebCodecs API 中专门用于图像解码的接口。它接受压缩的图片数据（如 JPEG、PNG 编码数据），并将其解码为原始的像素帧。ImageDecoder 的构造函数接受一个 ImageDecoderOptions 配置对象，指定编解码器类型和可选的解码参数。核心方法 decode() 执行实际的解码操作，返回一个包含解码帧和元数据的 ImageDecodeResult 对象。ImageDecoder 还提供了 isConfigSupported() 静态方法，用于检测浏览器是否支持指定的解码配置。
编解码器 Codec
编解码器（Codec）是负责将媒体数据在编码格式和原始格式之间转换的软件模块。编码器将原始数据（如未压缩的像素）压缩为特定格式的编码数据，解码器则执行相反的操作。常见的图像编解码器包括 JPEG（用于照片压缩）、PNG（用于无损压缩和透明度支持）、WebP（Google 开发的现代图像格式，支持有损和无损压缩）、AVIF（基于 AV1 视频编码的图像格式）等。浏览器通常内置了多种编解码器，WebCodecs API 让开发者能够直接使用它们。
像素格式 Pixel Format
像素格式描述了图像中每个像素的数据存储方式，包括颜色通道的数量和排列顺序。常见的像素格式有：RGBA（红绿绿蓝透明，每通道 8 位）、BGRA（蓝绿红透明）、RGB（无透明通道）、YUV（亮度-色度格式，常用于视频）等。ImageDecoder 解码后的输出帧会指定像素格式信息，开发者需要根据该格式正确读取像素数据。不同的像素格式在内存占用和处理效率上有所不同，选择合适的格式对性能优化很重要。
色彩空间 Color Space
色彩空间是描述颜色的数学模型，定义了如何用数值表示颜色。常见的色彩空间包括：sRGB（标准 RGB，网页和大多数显示器使用的色彩空间）、Display P3（Apple 设备支持的广色域）、Rec.2020（超高清视频标准的广色域）等。ImageDecoder 在解码时可以选择目标色彩空间，将原始图片数据从其原生色彩空间转换到指定的色彩空间。正确处理色彩空间对于保证颜色在不同设备上的一致性非常重要，特别是在处理广色域内容时。
帧序列 Frame Sequence
帧序列是动图中所有帧按照时间顺序排列的有序列表。每个帧都有自己的像素数据和时间信息（显示持续时间）。帧序列的元数据包括总帧数、循环次数、帧间延迟等。ImageDecoder 通过重复调用 decode() 方法并传入递增的 frameIndex 参数来逐帧解码。对于单帧图片，帧序列只包含一个元素。帧序列的时间信息对于正确播放动画至关重要，播放器需要根据每帧的持续时间来控制帧间切换的时机。
Chunked Decoding 分块解码
分块解码是 ImageDecoder 支持的一种解码策略，允许将大型图片数据分多次输入进行解码，而不是一次性加载全部数据。这种方式对于处理超大图片特别有用，可以避免一次性加载大量数据导致的内存压力。通过设置 ImageDecoderOptions 中的 preferAnimation 和 progressiveDecode 选项，开发者可以控制分块解码的行为。分块解码还允许在解码过程中插入控制帧，实现实时预览等高级功能。
ImageData 对象
ImageData 是 HTML Canvas API 中的一个接口，表示一个包含像素数据的对象。它包含了 width（宽度）、height（高度）和 data（Uint8ClampedArray 类型的像素数据数组）三个主要属性。ImageDecoder 解码后的帧数据可以转换为 ImageData 对象，然后绘制到 Canvas 上显示。ImageData 的 data 数组按照从上到下、从左到右的顺序存储每个像素的 RGBA 值，每个通道占一个字节。通过直接操作 ImageData 的 data 数组，可以实现各种像素级别的图像处理效果。