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 == 0）时，浏览器会自动将零，r，g，b值填充。

所以你的第一个putImage填充rgba（0,0,0,0）;

当你再次获取那些像素并将透明度更改为255（完全不透明）时，你有rgba（0,0,0,255）;

这是黑色的rgb。

这就是您的代码导致黑色像素的原因。

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

Answer 2

当谈到alpha通道和画布时，webkit浏览器中存在一些问题（也可能是Blink）。这是related issue。

什么markE答案可能是实际发生的事情，但它不是应该发生的事情。 alpha通道的整个点是RGB值保持不变（以及避免手动颜色混合等）。

Webkit浏览器需要预先乘以该值（在浏览器中合成时），但结果似乎是＆＃34;泄漏＆＃34;进入画布＆＃39;它不应该是位图。

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

可能的解决方法

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

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

当alpha = 0时，canvas会破坏rgb

2 个答案: