drawImage绘制PNG后getImageData返回RGBA值存在微小偏差的原因

问题表现 #

• 测试用素材为GIMP创建的单像素PNG图像，原始像素色值为 rgba=176 99 234 167
• 将图像绘制到Canvas上下文后，通过getImageData读取像素合成结果，返回值为 177,99,235,167，红、蓝通道存在1个数值的微小偏差，alpha通道数值一致
• 测试环境：Firefox 101版本浏览器

复现代码 #

var canvas = document.createElement('canvas');
canvas.height = 1;
canvas.width = 1;

var img = new Image();

img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TtSIVUSuIOGSoThZEizhKFYtgobQVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg+AHi6OSk6CIl/i8ptIj14Lgf7+497t4BQq3EVLNjElA1y0hEI2I6syr6XtGFfgxhAGGJmXosuZhC2/F1Dw9f70I8q/25P0evkjUZ4BGJ55huWMQbxDObls55nzjACpJCfE48YdAFiR+5Lrv8xjnvsMAzA0YqMU8cIBbzLSy3MCsYKnGYOKioGuULaZcVzluc1VKFNe7JX+jPaitJrtMcRRRLiCEOETIqKKIECyFaNVJMJGg/0sY/4vjj5JLJVQQjxwLKUCE5fvA/+N2tmZuecpP8EaDzxbY/xgDfLlCv2vb3sW3XTwDvM3ClNf3lGjD7SXq1qQWPgL5t4OK6qcl7wOUOMPykS4bkSF6aQi4HvJ/RN2WAwVugZ83trbGP0wcgRV0t3wAHh8B4nrLX27y7u7W3f880+vsBq/ZyvpKWOQAAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAHdElNRQfmBhIJOxEgSszOAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAABBJREFUCB0BBQD6/wCwY+qnBmkCpSTSg9wAAAAASUVORK5CYII=";
// 原始色值 rgba = 176 99 234 167

img.onload = function() {
  var context = canvas.getContext('2d');
  context.drawImage(img, 0, 0, 1, 1);
  var imgData = context.getImageData(0, 0, 1, 1);
  console.log(imgData);
  console.log("this is not 176 99 234 167");
}

问题说明 #

• 6月20日更新：Firefox环境下的运行输出结果见附图。
• 6月19日更新：该现象属于规范定义内的正常表现，可参考WHATWG官方Canvas规范说明：

注意
由于色彩空间转换、预乘Alpha颜色值双向转换存在有损特性，刚通过putImageData()设置的非完全不透明像素，在调用getImageData()读取时，可能返回数值存在差异的等效色值。

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