javascript - 当 alpha 小于 1 时，HTML Canvas 不准确地设置像素颜色

Question

请看这个例子:http://codepen.io/anon/pen/QNGzBP

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

// set pixel at 0,0 to rgba(2, 0, 255, 0.2)
const imageData = ctx.getImageData(0, 0, 1, 1)
imageData.data[0] = 2
imageData.data[1] = 0
imageData.data[2] = 255
imageData.data[3] = 0.2 * 255 // 0.2 opacity
ctx.putImageData(imageData, 0, 0, 0, 0, 1, 1)
console.log('Setting pixel 0,0 to', {
  r: imageData.data[0],
  g: imageData.data[1],
  b: imageData.data[2],
  a: imageData.data[3] / 255
})

// retrieve pixel at 0,0
const newImageData = ctx.getImageData(0, 0, 1, 1)
console.log('Fetching pixel at 0,0', {
  r: newImageData.data[0],
  g: newImageData.data[1],
  b: newImageData.data[2],
  a: newImageData.data[3] / 255
})

以上代码修改 Canvas 上的单个像素，然后检索它，同时控制台记录该过程。当 alpha 低于 1 时， Canvas 似乎会改变 RGB 数据。

它似乎同时出现在 Chrome 和 Firefox 中。这只是一个浏览器错误吗？我正在用 Canvas 制作 PNG，并要求颜色 100% 准确。有什么解决方法吗？

编辑:

http://codepen.io/anon/pen/ZWLbKx

显示 alpha 如何改变 rgb 值的更多测试。

Answer 1

很抱歉让您失望，但 HTML5 Canvas 已被批准为“有损”:它使用 alpha channel 预乘。

来自 https://www.w3.org/TR/2dcontext/#dom-context-2d-getimagedata (参见第二个“注意:”框):

Due to the lossy nature of converting to and from premultiplied alpha color values, pixels that have just been set using putImageData() might be returned to an equivalent getImageData() as different values.

• 推荐阅读: How can I stop the alpha-premultiplication with canvas imageData?

• 也相关:Why function returns wrong color in canvas?

• 看起来有点相似，但可能是关于一个完全不同的域:Invalid blending results across all browsers with HTML5 canvas

...有很多 JavaScript PNG 编码器/解码器。不幸的是，截至 2017 年，情况就是这样。

FWIW，我试过上下颠簸 r/g/b/a 值，以尝试让 Canvas 吐出我真正想要的值。 5 分钟的实验表明，它会根据 alpha 设置“跳跃”到您想要的特定像素值。