image - HTML5如何在画布中绘制透明像素图像

Question

我正在使用 rgb 像素数据绘制图像。我需要为该图像设置透明背景颜色。我可以为 alpha 设置什么值成为透明图像？或者还有其他解决方案吗？

Answer 1

如果我了解您的需求，您基本上想将图像上的特定颜色变为透明。为此，您需要getImageData查看mdn 以获取有关像素操作的说明。

这是一些示例代码

var imgd = ctx.getImageData(0, 0, imageWidth, imageHeight),
    pix = imgd.data;

for (var i = 0, n = pix.length; i <n; i += 4) {
    var r = pix[i],
        g = pix[i+1],
        b = pix[i+2];

    if(g > 150){ 
        // If the green component value is higher than 150
        // make the pixel transparent because i+3 is the alpha component
        // values 0-255 work, 255 is solid
        pix[i + 3] = 0;
    }
}

ctx.putImageData(imgd, 0, 0);​

和一个工作演示

使用上面的代码，您可以使用

if(r == 255 && g == 0 && b == 255)

Answer 2

我想你想要clearRect画布方法：

http://www.w3schools.com/html5/canvas_clearrect.asp

这将使您无需大惊小怪或像素操作即可将像素清除为透明（或任何其他 RGBA 颜色）。

Answer 3

alpha 为 0 表示像素是完全透明的，alpha 值为 255 是完全不透明的，这意味着它将没有透明度。

如果您的图像部分是完全透明的（alpha 为 0），那么只要使用 0 的 Alpha，您使用什么 RGB 值就无关紧要了。在旁注中，我使用的一些较旧的 windows 程序制作了一个像左上像素或右下像素这样的假设将用作透明度颜色。然后它会循环遍历所有像素，并在遇到此特定 RGB 值时将 alpha 设置为 0。

如果您使用 127 的 Alpha 并且图像出现在另一张图像的顶部，则看起来这两个图像同样可见，或者底部图像将 50% 的颜色渗入顶部图像。

如果您想测试并查看将其应用于整个图像时的外观，请为 alpha 设置一个变量。