Sử dụng hình ảnh html5 canvas làm mặt nạ

Question

Có thể sử dụng hình ảnh có hình dạng làm mặt nạ cho toàn bộ canvas hoặc hình ảnh trong canvas không?

Tôi muốn đặt hình ảnh trong canvas bằng mặt nạ trên hình ảnh, sau đó lưu hình ảnh dưới dạng hình ảnh mới.

Answer 1

Bạn có thể sử dụng hình ảnh đen trắng làm mặt nạ bằng cách sử dụng tính năng globalCompositeOperation 'nguồn-in'. Trước tiên, bạn vẽ hình ảnh mặt nạ của mình vào canvas, sau đó bạn thay đổi globalCompositeOperation thành 'source-in', cuối cùng bạn vẽ hình ảnh cuối cùng của mình.

Hình ảnh cuối cùng của bạn sẽ chỉ vẽ ở nơi che phủ mặt nạ.

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

Ngoài câu trả lời của Pierre bạn cũng có thể sử dụng một hình ảnh màu đen và trắng như một nguồn mặt nạ cho hình ảnh của bạn bằng cách sao chép dữ liệu của nó thành một CanvasPixelArray như:

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