HTML5如何在画布中绘制透明像素图像答案

【问题标题】：HTML5 how to draw transparent pixel image in canvasHTML5如何在画布中绘制透明像素图像
【发布时间】：2012-04-18 15:02:03
【问题描述】：

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

【问题讨论】：

相关：stackoverflow.com/questions/2916938/…

标签： image html canvas pixel transparent

【解决方案1】：

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

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

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

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

【讨论】：

当我将所有像素的 alpha 设置为 0 时，我的图像部分完全变为白色。

【解决方案2】：

如果我了解您的需求，您基本上希望将图像上的特定颜色变为透明。为此，您需要使用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)

【讨论】：

绘制像素图像后，我必须在 mousemove 事件中移动该图像。当我移动该图像时，我可以看到该图像周围的白色矩形。我需要避免这种情况。或者有什么方法可以单独移动该图像而不是像素矩形？
除了查找 rgb 为 255,255,255（白色）的像素外，您必须执行上述操作。查看 jsfiddle，它创建了一个临时画布元素，并将结果绘制到它。这就是你需要做的。您将进行像素操作并使用putImageData 将数据放在新的画布上，这就是您要移动的内容而不是图像。
在临时画布元素上绘制图像后，我使用以下代码解决了我的问题。感谢您的帮助。 var imgURL = tempCanvas.toDataURL(); var myImage = new Image(); myImage.src=imgURL; context.drawImage(myImage,xPos,yPos);

【解决方案3】：

我想你想要 clearRect 画布方法：

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

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

【讨论】：