javascript - 像素操作和 Canvas

Question

javascript 中是否有一种方法可以在为像素操作编码时将每个像素的 alpha channel 更改为完全透明 (a=0)(这意味着您仍然可以根据需要更改某些 alpha channel 的透明度)？

基本上，我正在做的是:给定特定图像的一些数据，我使用算法操纵像素阵列，以便某些像素变得完全透明，除非它们满足某些特定条件。如果它们满足我希望它们完全不透明的条件，也就是 alpha=1。但是，由于算法工作方式的复杂性，我需要“重置”我的数据；这意味着我希望像素阵列以每个 alpha = 0 开始。如果这有助于更好地理解我的问题范围，我可以提供代码。

非常感谢。

编辑:我正在寻找更多的方法/单行代码。 context.globalAlpha = 0 会达到目的吗？有什么我应该注意的陷阱吗？

EDIT2:这是我的代码。我放置它的 globalAlpha 是否按照我的预期执行？我不确定如何使用它...

function getBoundary(imagedata){
var imageData = new Array(imagedata.data.length);
imageData = imagedata.data;
var w = imagedata.width;
var h = imagedata.height;<br/>
var color1 = [];
var colorRight = [];
var colorDown = [];
context.globalAlpha = 0;
for (var i = 0; i < 4*w*h; i +=4) {
color1 = [imageData[i],imageData[i+1],imageData[i+2]];<br/>
colorRight = [imageData[i+4],imageData[i+5],imageData[i+6]];
colorDown = [imageData[4*w+i],imageData[4*w+i+1],imageData[4*w+i+2]];<br/>
if(colorRight = [255,255,255]){ //if right is white
if(color1 = [0,0,0]){
imageData[i+3] = 255;
}
else{
if(colorDown = [0,0,0]){
imageData[4*w+i+3] = 255;
}
}
}
else{ //colorRight = black
if(color1 = [0,0,0]){
if(colorDown = [255,255,255]){
imageData[i+3] = 255;
}
}
else if(color1 = [255,255,255]){
imageData[i+7] = 255;
if(colorDown = [0,0,0]){
imageData[4*w+i+3] = 255;
}
else{
}
}
}
}
console.log("done");
imagedata.data = imageData;
return imagedata;
}

Answer 1

您可以使用 getImageData 并将所有 alpha 元素翻转为零:

您可以像这样创建一个将 Canvas 上所有像素的 alpha 归零的函数:

function zeroAllAlpha(){

    var imageData=context.getImageData(0,0,canvas.width,canvas.height);

    var data=imageData.data;

    // set all alpha elements to zero (fully transparent);

    for(var i=3;i<data.length;i+=4){

        data[i]=0;

    }

    context.putImageData(imagedata,0,0);

}

你可以像这样用一行调用函数:

zeroAllAlpha();