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

问题描述

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

  canvas = document.getElementById（'canvasid'）
 ctx = canvas.getContext （i = 0; i  mydata = ctx.getImageData（20,20,20,20） 0} 
 ctx.putImageData（mydata，20,20）
 mydata = ctx.getImageData（20,20,20,20）
 for（var i = 0; i  ctx.putImageData（mydata，20,20）
  

会产生一个黑色正方形，而不是恢复应该是RGB值的图片。

't tested others

任何线索，我做错了什么。

解决方案

当涉及到Alpha通道和画布时，webkit浏览器（以及Blink）这是。

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

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

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

可能的解决方法

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

当然，如果你需要更新RGB /像素数据的同时，你会回到相同的情况，除非你愿意更新像素（RGB）只有离屏缓冲区 - 这可以使用32位类型数组缓冲区掩蔽alpha通道（性能降低将发生）。

I'm using a HTML canvas to project an image. When i try to manipulate the image data's Alpha channel I'm seeing that anytime it is zeroed, the other values in the pixel get changed. Even when set to a low number they seem to change. Doing this from the console

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)

results in a black square instead of a restoring the image that should be in the RGB values.

happens in both Chrome and Safari, haven't tested others

any clues as to what i'm doing wrong.

解决方案

There is several issues in webkit browsers (and probably Blink as well) when it comes to the alpha channel and canvas. Here is a related issue.

What markE answers may be what actually happens but it's not what should happen. The whole point with the alpha channel is that the RGB values are left untouched (as well as avoid manual color mixing etc.).

Webkit browser would need to pre-multiply the value (when composited in the browser) but the result of this seem to "leak" into the canvas' bitmap which it shouldn't.

You are correctly expecting the values to stay untouched when changing the alpha channel. This is a bug and you should report it to the Chromium team (edit: now has been reported).

Possible work-around

The only work-around I can think of on the fly, would be to keep the original image data as a separate buffer and copy data from that source buffer to the destination buffer while altering the alpha channel.

Of course, if you need to update the RGB/pixels data in the mean time you would be back to the same situation before unless you are willing to update pixels (RGB) only for the off-screen buffer - this can be done using a 32-bits typed array buffer masking the alpha channel (performance reduction will occur).

这篇关于当alpha = 0时，画布会破坏rgb的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！