当 alpha = 0 时，画布会损坏 rgb

Question

我正在使用 HTML 画布来投影图像。当我尝试操纵图像数据的 Alpha 通道时，我看到任何时候它被归零，像素中的其他值都会改变。即使设置为较低的数字，它们似乎也会发生变化。从控制台执行此操作

canvas=document.getElementById('canvasid')
ctx=canvas.getContext('2d')
mydata=ctx.getImageData(20,20,20,20)
for (var i=0;i<1600;i+=4){mydata.data[i+3]=0}
ctx.putImageData(mydata,20,20)
mydata=ctx.getImageData(20,20,20,20)
for (var i=0;i<1600;i+=4){mydata.data[i+3]=255}
ctx.putImageData(mydata,20,20)

产生一个黑色方块，而不是恢复应该在 RGB 值中的图像。

发生在 Chrome 和 Safari 中，尚未测试其他人

关于我做错了什么的任何线索。

Answer 1

在涉及 alpha 通道和画布时，webkit 浏览器（可能还有 Blink）存在几个问题。这是related issue。

markE 回答的可能是实际发生的情况，但不是 应该 发生的情况。 Alpha 通道的重点是 RGB 值保持不变（以及避免手动颜色混合等）。

Webkit 浏览器需要预乘该值（在浏览器中合成时），但结果似乎“泄漏”到画布的位图中，这是不应该的。

您正确地期望值在更改 Alpha 通道时保持不变。这是一个错误，您应该向 Chromium 团队报告（编辑：现在是has been reported）。

可能的解决方法

我能想到的唯一解决方法是将原始图像数据保留为单独的缓冲区，并将数据从源缓冲区复制到目标缓冲区，同时更改 alpha 通道。

当然，如果您需要同时更新 RGB/像素数据，除非您愿意仅为屏幕外缓冲区更新像素 (RGB)，否则您将回到之前的相同情况 - 这可以是使用屏蔽 alpha 通道的 32 位类型化数组缓冲区完成（会降低性能）。

Answer 2

当您将完全透明的像素写入画布 (alpha==0) 时，浏览器会自动将 r,g,b 值填充为零。

所以你的第一个 putImage 填充了 rgba(0,0,0,0);

当您再次获取这些像素并将透明度更改为 255（完全不透明）时，您将获得 rgba(0,0,0,255);

这是黑色的 rgb。

这就是您的代码产生黑色像素的原因。

如果要恢复原始像素，可以使用原始 mydata 执行 putImageData（无需使用另一个 getImageData 重新获取）。