当 alpha =0 时画布会损坏 RGB

我正在使用 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 都会出现这种情况，其他的没测试过

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

当涉及到 alpha 通道和画布时，webkit 浏览器（可能还有 Blink）存在几个问题。这里有一个相关问题 https://code.google.com/p/chromium/issues/detail?id=234014.

markE 的答案可能是实际发生的情况，但并不是真正发生的情况should发生。 Alpha 通道的全部要点是 RGB 值保持不变（以及避免手动颜色混合等）。

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

您正确地期望在更改 Alpha 通道时这些值保持不变。这是一个错误，您应该将其报告给 Chromium 团队（edit: now 已经被报告了 https://bugs.chromium.org/p/chromium/issues/detail?id=637576).

可能的解决方法

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

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