lienzo html5 usa la imagen como máscara

Question

¿Es posible usar una imagen con una forma como máscara para todo un lienzo o imágenes dentro del lienzo?

Quiero colocar imágenes en un lienzo con una máscara sobre las imágenes, y luego guardarlas como una nueva imagen.

Answer 1

Puede utilizar una imagen en blanco y negro como una máscara usando 'source-in' globalCompositeOperation. Primero dibuja la imagen de tu máscara en el lienzo, luego cambias la opción globalCompositeOperation a 'source-in', finalmente dibujas tu imagen final.

Su imagen final solo se dibujará donde se superponga la máscara.

var ctx = document.getElementById('c').getContext('2d'); 

ctx.drawImage(YOUR_MASK, 0, 0); 
ctx.globalCompositeOperation = 'source-in'; 
ctx.drawImage(YOUR_IMAGE, 0 , 0); 

More info on global composite operations

Answer 2

Además de la respuesta de Pierre también se puede utilizar una imagen en blanco y negro como fuente máscara para su imagen mediante la copia de sus datos en un CanvasPixelArray como:

var 
dimensions = {width: XXX, height: XXX}, //your dimensions 
imageObj = document.getElementById('#image'), //select image for RGB 
maskObj = document.getElementById('#mask'), //select B/W-mask 
image = imageObj.getImageData(0, 0, dimensions.width, dimensions.height), 
alphaData = maskObj.getImageData(0, 0, dimensions.width, dimensions.height).data; //this is a canvas pixel array 

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

    image.data[i] = alphaData[i-1]; //copies blue channel of BW mask into A channel of the image 

} 

//displayCtx is the 2d drawing context of your canvas 
displayCtx.putImageData(image, 0, 0, 0, 0, dimensions.width, dimensions.height);