html - html5画布drawImage没有alpha

Question

我想知道是否可以不使用 alpha 通道但保持透明度。我需要的是根据 alpha 值绘制或不绘制像素（我的 png 文件）

如果 alpha 通道 > 128 绘制像素，则不绘制像素！

谢谢

Answer 1

可能有几种方法可以解决这个问题。

一种方法是只绘制图像，然后调用getImageData

检查图像数据中的每个像素，如果 alpha 分量 <= 128，则使该像素完全透明。

然后将修改后的 imageData 放回去putImageData

这是来自记忆，所以我可能错过了一些东西：

var imageData = ctx.getImageData(0,0,picwidth, picheight);
var pixels = imageData.data;
var numPixels = pixels.length;

ctx.clearRect(0, 0, can.width, can.height);

for (var i = 0; i < numPixels; i++) {
    if (pixels[i*4+3] <= 128) pixels[i*4+3] = 0;
}
ctx.putImageData(imageData, 0, 0);