画布：掩盖图像并保留其Alpha通道？

Question

这里就是我想要做的事：

1. 获取图像A，和B图像的图像B是黑色和白色口罩的形象。
2. 将图像A的alpha通道替换为图像B的红色通道。
3. 在画布上绘制图像C.
4. 图像的顶部C.

一切似乎确定，直到第4步图像C绘制图像A是不是在所有地方和图像A应该是透明的有白色可见。

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

Answer 1

西蒙是正确的：putImageData方法不关注任何合成;它只是复制像素值。为了获得合成，我们需要使用绘图操作。

我们需要使用像素数据来处理通道（将红色变为alpha），将更改过的像素数据放入图像中，然后使用复合操作获得所需的遮罩。

//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

与例如涂鸦：

Answer 2

因为在步骤4中，您使用的是putImageData，它完全取代了像素。你想在图像C的顶部绘制图像A，所以你不能这样做。相反，你将要使用drawImage()

所以做：

cx.putImageData(imageC, 0, 0); // step 3 
// create a new canvas and new context, 
// call that new context ctx2 and canvas can2: 
var can2 = document.createElement('canvas'); 
// set can2's width and height, get the context etc... 
ctx2.putImageData(resultData, 0, 0); 
cx.drawImage(can2, 0, 0); // step 4 using drawImage instead of putting image data