Canvas的drawImage如何转YUV为sRGB？NV12手动转换差异解惑

我在使用WebCodecs时发现，手动将NV12格式转换为RGB格式得到的ImageData，与直接将VideoFrame绘制到Canvas后读取的ImageData存在细微差异。

两种方式的ImageData对比 #

• Canvas获取的ImageData：

  [87, 87, 39, 255, 86, 86, 39, 255, 85, 85, 39, 255, 83, 84, 39, 255, 81, 83, 39, 255, 79, 82, 38, 255, 77, 81, 37, 255, 76, 80, 36, 255, 79, 83, ... ]
  

• 手动转换NV12为RGB得到的ImageData：

  [94, 101, 62, 255, 94, 101, 62, 255, 95, 102, 63, 255, 97, 103, 64, 255, 97, 103, 64, 255, 98, 104, 66, 255, 100, 106, 68, 255, 101, 108, 69, 25, ...]
  

恳请告知差异产生原因，以及Canvas将YUV格式转换为RGB格式的具体机制。

两种实现方式的代码 #

1. 将图像绘制到Canvas并获取ImageData #

this.context.drawImage(frame, 0, 0, this.canvas.width, this.canvas.height);
let imageData = this.context!.getImageData(0, 0, this.canvas.width, this.canvas.height);

2. 将VideoFrame内容写入数组并转换为RGB格式 #

...
let imageData = convertToImageData(videoFrame);
...

public async convertToImageData(frame) {
  let buffer : Uint8ClampedArray = new Uint8ClampedArray(frame.allocationSize());
  await frame.copyTo(buffer) 
  let imageData = await this.convertNV12ToRGB(buffer)
  return imageData;
}

private convertNV12ToRGB(buffer : Uint8ClampedArray) {
  // Y分量范围：0-921599（对应1280x720分辨率）
  // Cr & Cb分量范围：921600 - 1382399，交错存储
  // 注意：当前实现速度较慢，转换1280x720图像耗时约44秒
  
  let imageData : ImageData = this.context!.getImageData(0, 0, 1280, 720);
      
  let pixels : Uint8ClampedArray = imageData.data;

  let row : number = 0;
  let col : number = 0;
  const plane2Start = 1280 * 720; // 色度分量起始位置
  for (row = 0; row < 720; row++) {
    const p2row = (row % 2 === 0 ? row / 2 : row / 2 - 0.5) * 1280; // 色度行索引
    let cr = 0;
    let cb = 0;
    const rowOffset : number = row * 1280;
    for (col = 0; col < 1280; col++) {
      const indexY = rowOffset + col;
      let y = buffer[indexY];
      if (col % 2 === 0) {
        const indexCr = plane2Start + p2row + (col);
        const indexCb = indexCr + 1;
        cr = buffer[indexCr];
        cb = buffer[indexCb];
      }
      this.yuvToRgb(y, cr, cb, row, col, pixels);
    }
  }
  return imageData;
}

private yuvToRgb(y : number, u : number, v : number, row : number, col : number, pixels : Uint8ClampedArray) {
  y -= 16;
  u -= 128;
  v -= 128;
  let r = 1.164 * y             + 1.596 * v;
  let g = 1.164 * y - 0.392 * u - 0.813 * v;
  let b = 1.164 * y + 2.017 * u;

  const index = (row * 1280 + col) * 4;
  pixels[index] = r;
  pixels[index + 1] = g;
  pixels[index + 2] = b;
  pixels[index + 3] = 255;
}

问题解答 #

差异产生的核心原因 #

1. 色彩转换标准不匹配
   你手动实现的YUV转RGB公式采用的是BT.601标准（标清视频常用），但Canvas处理VideoFrame时，默认会使用BT.709标准（高清视频通用），两者转换系数不同：

   • BT.601系数：

     R = 1.164*(Y-16) + 1.596*(V-128)
     G = 1.164*(Y-16) - 0.392*(U-128) - 0.813*(V-128)
     B = 1.164*(Y-16) + 2.017*(U-128)
     

   • BT.709系数：

     R = 1.164*(Y-16) + 1.793*(V-128)
     G = 1.164*(Y-16) - 0.213*(U-128) - 0.533*(V-128)
     B = 1.164*(Y-16) + 2.112*(U-128)
     

   系数差异直接导致RGB计算结果出现偏差。

2. 色度插值方式不同
   NV12是4:2:0采样格式，每个色度值对应2x2的亮度像素。你的手动实现中仅在偶数列更新Cr/Cb值，奇数列直接复用前一个值（无插值）；而Canvas内部会对色度通道做双线性插值，让相邻像素色彩过渡更平滑，这也会造成像素值差异。

3. 数值处理逻辑不同
   你手动计算的RGB值直接赋值给Uint8ClampedArray，未对超出0-255范围的数值做钳位处理；而Canvas会自动将超出范围的数值截断到0-255区间，同时采用硬件加速的高精度运算，减少浮点精度损失。

Canvas处理YUV转RGB的具体机制 #

1. 优先硬件加速
   Canvas会调用GPU的硬件解码与色彩转换模块，直接将VideoFrame的YUV数据（通常存储在GPU纹理中）转换为RGB格式，避免CPU内存拷贝，同时利用GPU优化的插值算法提升效率。

2. 色彩空间自动适配
   根据VideoFrame的元数据（如视频标注的色彩标准）自动选择对应转换公式，若VideoFrame无明确标注，浏览器默认按高清视频使用BT.709标准。

3. 采样插值优化
   对4:2:0采样的色度通道，Canvas执行双线性插值计算每个亮度像素对应的色度值，而非简单复用相邻值，提升色彩还原准确性。

4. 数值标准化处理
   转换后的RGB值会被自动钳位到0-255范围，同时根据浏览器色彩渲染标准做gamma校正，确保最终显示颜色符合规范。

内容的提问来源于stack exchange，提问作者Kevin Baving