Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Canvas: mask an image and preserve its alpha channel?

Here's what I'm trying to do:

  1. Get image A, and image B. Image B is a black and white mask image.
  2. Replace image A's alpha channel with image B's red channel.
  3. Draw image C on the canvas.
  4. Draw image A on top of image C.

Everything seems ok until step 4. Image C isn't visible at all and where image A should be transparent there's white color.

cx.putImageData(imageA, 0, 0);
var resultData = cx.getImageData(0, 0, view.width, view.height);

for (var h=0; h<resultData.data.length; h+=4) {
    resultData.data[h+3] = imageB.data[h];
}

cx.putImageData(imageC, 0, 0);
cx.putImageData(resultData, 0, 0);
like image 594
Nikolay Dyankov Avatar asked Jan 27 '12 10:01

Nikolay Dyankov


People also ask

What is the alpha channel in Photoshop?

Photoshop has one other type of channel: alpha channels. Their special purpose is to store selections so you can use or edit them later. These channels get their name from a process called alpha compositing, which combines a partially transparent image with another image.

What are masks and Channels explain in detail?

Masks are like stencils that protect parts of an image. There are also two kinds - temporary (quick masks) and permanent (alpha channels) Color Channels. An RGB image has four color channels - red, green, blue and a composite RGB channel. You can perform color corrections on individual channels for precise adjustments.


1 Answers

Simon is right: the putImageData method does not pay any attention to compositing; it merely copies pixel values. In order to get compositing, we need to use drawing operations.

We need to mess with the channels (turn red into alpha) with the pixel data, put that changed pixel data into an image, and then use a composite operation to get the desired masking.

Kinda lame

//copy from one channel to another
var assignChannel = function(imageData, channelTo, channelFrom) {
  if(channelTo < 0 || channelTo > 3 || channelFrom < 0 || channelFrom > 3) {
    throw new Error("bad channel number");
  }
  if(channelTo == channelFrom)
    return;
  var px = imageData.data;
  for(var i = 0; i < px.length; i += 4) {
    px[i + channelTo] = px[i + channelFrom];
  }
};
/**============================================================================ 
  * this function uses 3 or 4 canvases for clarity / pedagogical reasons:
  * redCanvas has our mask image;
  * maskCanvas will be used to store the alpha channel conversion of redCanvas' image;
  * imageCanvas contains the image to be masked;
  * ctx is the context of the canvas to which the masked image will be drawn.
============================================================================**/
var drawOnTopOfRed = function(redCanvas, maskCanvas, imageCanvas, ctx) {
  var redImageData = redCanvas.getContext("2d").getImageData(0, 0, w, h);

  //assign the alpha channel
  assignChannel(redImageData, 3, 0);

  //write the mask image
  maskCanvas.getContext("2d").putImageData(redImageData, 0, 0);

  ctx.save();

  //draw the mask
  ctx.globalCompositeOperation = "copy";
  ctx.drawImage(maskCanvas, 0, 0);

  //draw the image to be masked, but only where both it
  //and the mask are opaque; see http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#compositing for details.
  ctx.globalCompositeOperation = "source-in";
  ctx.drawImage(imageCanvas, 0, 0);
  ctx.restore();
};

jsfiddle example

A doodle with the example:

Kinda lameabout the same

like image 193
ellisbben Avatar answered Sep 18 '22 13:09

ellisbben