html - 当 alpha =0 时 Canvas 会损坏 RGB

Question

我正在使用 HTML Canvas 来投影图像。当我尝试操纵图像数据的 Alpha channel 时，我发现只要将其归零，像素中的其他值就会发生变化。即使设置为较低的数字，它们似乎也会发生变化。从控制台执行此操作

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)

结果是黑色方 block ，而不是恢复应该在 RGB 值中的图像。

在 Chrome 和 Safari 中都会发生，尚未测试其他版本

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

Answer 1

当涉及到 alpha channel 和 Canvas 时，webkit 浏览器(可能还有 Blink)存在几个问题。这是related issue .

markE 的答案可能是实际发生的情况，但不是应该发生的情况。 Alpha channel 的全部要点是 RGB 值保持不变(以及避免手动颜色混合等)。

Webkit 浏览器需要预先乘以该值(在浏览器中合成时)，但其结果似乎“泄漏”到 Canvas 的位图中，而这是不应该的。

您正确地期望在更改 Alpha channel 时这些值保持不变。这是一个错误，您应该将其报告给 Chromium 团队(编辑:现在 has been reported )。

可能的解决方法

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

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