html5キャンバス画像をマスクとして使用

Question

キャンバス全体またはキャンバス内の画像のマスクとしてシェイプの画像を使用できますか？

イメージ上にマスクを付けてイメージをキャンバスに配置し、新しいイメージとして保存します。

Answer 1

'source-in' globalCompositeOperationを使用して、白黒イメージをマスクとして使用できます。まずマスクイメージをキャンバスに描画し、次にglobalCompositeOperationを 'source-in'に変更して、最後に最終イメージを描画します。

あなたの最終的な画像は、マスクの上に重なる場所だけを描画します。あなたも同じようCanvasPixelArrayにそのデータをコピーして、画像用マスクソースとして黒と白の画像を使用することができピエールの答えに加えて

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

：

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