html5 canvas 이미지를 마스크로 사용

Question

모양이있는 이미지를 전체 캔버스 또는 캔버스의 이미지 마스크로 사용할 수 있습니까?

이미지 위에 마스크로 캔버스에 이미지를 놓은 다음 새 이미지로 저장하려고합니다.

Answer 1

'source-in'globalcompositeOperation을 사용하여 흑백 이미지를 마스크로 사용할 수 있습니다. 먼저 캔버스에 마스크 이미지를 그린 다음 globalcompositeOperation을 'source-in'으로 변경하고 마지막으로 최종 이미지를 그립니다.

최종 이미지는 마스크가 겹쳐지는 부분 만 그립니다. 피에르의 대답에 추가

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

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

Answer 2

More info on global composite operations 당신은 또한 같은 CanvasPixelArray로 데이터를 복사하여 이미지의 마스크 소스로 흑백 이미지를 사용할 수 있습니다

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