Javascript html5画布使用图像作为掩码

是否可以使用具有形状的图像作为整个画布或画布内图像的遮罩

---

我想将图像放置在画布中，并在图像上加一个遮罩，然后将其另存为新图像。

您可以使用“源于”GlobalComposite操作将黑白图像用作遮罩。首先将遮罩图像绘制到画布上，然后将GlobalComposite操作更改为“源输入”，最后绘制最终图像

您的最终图像将仅在覆盖遮罩的位置绘制

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

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

---

除了Pierre的答案，您还可以通过将黑白图像的数据复制到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);

var
维度={宽度：XXX，高度：XXX}，//您的维度
imageObj=document.getElementById（'#image'），//为RGB选择图像
maskObj=document.getElementById（“#mask”），//选择B/W-mask
image=imageObj.getImageData（0,0，dimensions.width，dimensions.height），
alphaData=maskObj.getImageData（0,0，dimensions.width，dimensions.height）//这是一个画布像素阵列
对于（变量i=3，len=image.data.length；i

是的，如果遮罩图像上确实有一些透明区域，您可以轻松使用

drawImage（）

在画布上绘制图像。透明部分将使基础图像/画布发光。这不是我的意思，我希望形状剪裁图像，以便图像的其余部分变得透明。它部分起作用，当我向画布添加更多图片时失败。如何正确设置遮罩，以便在加载更多图像时仍使用遮罩？将GlobalComposite操作设置回绘制后的原始状态（最有可能是“源代码覆盖”）。遗憾的是，像素旁路并不像drawImage方法那样有效。