javascript - html5キャンバスはマスクとして画像を使用します

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

ピエールの答えに加えて、次のようにデータを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);