像素操作和画布

Question

Is there a way in javascript to change the alpha channels of each pixel into being fully transparent (a=0) while coding for pixel manipulation (meaning that you can still change the transparency in some of the alpha channels as desired)?

Basically, what I'm doing is: given some data for a specific image, I manipulate the pixel array using an algorithm so that some pixels become fully transparent unless they satisfy some certain condition. In the case of them satisfying the condition I want them to be fully opaque, aka alpha=1. However, because of a complication with the way the algorithm works, I need to have my data "reset"; meaning I want the pixel array to start off as having every alpha = 0. I can provide code if that helps in better understanding the scope of my question.

Thanks so much.

EDIT: I'm looking more for a method/one-line code. Would context.globalAlpha = 0 serve the purposes? Is there any pitfall I should be careful about?

EDIT2: This is my code. Does globalAlpha where I've put it do what I'm expecting it to do? I'm not sure how to use it...

function getBoundary(imagedata){ var imageData = new Array(imagedata.data.length); imageData = imagedata.data; var w = imagedata.width; var h = imagedata.height;
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]];
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]];
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

You can use getImageData and flip all the alpha elements to zero:

You can create a function that zeros the alpha of all pixels on the canvas like this:

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

}

And you can call the function with one line like this:

zeroAllAlpha();