javascript - HTML Canvas 从 getImageData 返回 "off-by-some"字节

Question

我发现 getImageData的 HTML Canvas 似乎返回不正确的字节值。

我使用以下 Python 代码生成了一个 1x1 像素的图像:

from PIL import Image
import numpy as np

a = np.array([[[12, 187, 146, 62]]], dtype=np.uint8)
Image.fromarray(a).save('image.png')

我将图像转换为 base64 以将其包含在此代码段中:

let image = document.createElement('img');
image.addEventListener('load', () => {
  let canvas = document.createElement('canvas');
  let ctx = canvas.getContext("2d");
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0);
  let data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
  document.body.innerHTML = data;
});

image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGPg2T3JDgADyAGYmiSbAQAAAABJRU5ErkJggg==";

在 Firefox 中运行时，显示 12,189,148,62 .在 Chromium 中，它显示 12,185,144,62 .但原始值是 12,187,146,62 .

谁能解释一下？

Answer 1

Firefox 预乘法舍入错误
我可以确认 FF (Firefox) 确实将像素值返回为 [12,189,148,62]渲染到 Canvas 时像素根据 globalCompositeOperation 的值进行处理默认为 "source-over" .该计算是对 FF 接缝四舍五入不正确的预乘 alpha 值执行的。
备注 关闭 alpha canvas.getContext("2d", {alpha: false})为 CanvasRenderingContext2D结果像素为FF [3,46,36,255]和 Chrome [3,45,35,255] .
Chrome 具有正确的值，如以下代码段所示。

// correct pre mult alpha 
console.log([12,187,146].map(c => Math.round(c * 62 / 255)) + "");

FF 出于某种原因正在围捕，我认为这是一个 错误
这个舍入误差(在 FF 中)会影响 "source-over" 的结果合成时 alpha: true导致高于预期的值。
有关合成的更多信息 W3C Compositing and Blending
使固定？
我不能建议修复，只能说 Chrome 正在正确渲染图像，而 FF 则没有。