image - HTML5如何在canvas中绘制透明像素图片

Question

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

Answer 1

如果我理解您的需求，您基本上是想将图像上的特定颜色变为透明。为此，您需要使用 getImageData 查看 mdn for an explanation on pixel manipulation .

下面是一些示例代码

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);​

And a working demo

使用上面的代码，您可以使用以下方法检查紫红色

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