回答
您可以使用'source-in'globalCompositeOperation将黑白图像用作蒙版。首先将遮罩图像绘制到画布上,然后将globalCompositeOperation更改为“源代码”,最后绘制最终图像。
您的最终图像只能在覆盖面具的地方绘制。
var ctx = document.getElementById('c').getContext('2d');
ctx.drawImage(YOUR_MASK, 0, 0);
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(YOUR_IMAGE, 0 , 0);
它部分工作,当我添加更多的图片到画布失败。我如何正确设置蒙版,所以当我加载更多的图像时,它仍然使用蒙版? – Jaap
将globalCompositeOperation设置回绘图后最初的状态(很可能是“源代码”)。 –
除了皮埃尔的回答,你也可以使用一个黑白图像作为图像掩码源通过复制其数据到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);
不幸的是,像素旁路并不像drawImage方法那样高效。 –
- 1. HTML5 Canvas位图蒙版和绘图位图
- 2. CGImageCreateWithMask以图像作为蒙版
- 3. 使用蒙版获取图像像素
- 4. CSS webkit图像蒙版不起作用
- 5. 在固定图像上使用div作为蒙版
- 6. 使用.Net和Javascript叠加PNG图像作为蒙版
- 7. Android蒙版图像
- 8. WinRT蒙版图像
- 9. 将两个图像绘制为HTML5 Canvas
- 10. HTML5 Canvas多个图像
- 11. HTML5 Canvas叠加图像
- 12. 使用matlab工具蒙版图像
- 13. AS3:使用蒙版和裁剪图像
- 14. 使用Win2D擦除蒙版图像
- 15. 使用dataurl的图像蒙版
- 16. Cocos2D:如何使用蒙版图像
- 17. 使用HTML5和canvas制作动画图像
- 18. 含有alpha的蒙版图像会使内蒙版黑色
- 19. 使用图像使用webgl,html5 canvas的3D图形实现
- 20. Flex 4使用椭圆作为蒙版
- 21. css图像蒙版覆盖
- 22. 蒙版/裁剪图像
- 23. jquery蒙版图像效果
- 24. 多重蒙版图像
- 25. 反转SVG图像蒙版
- 26. 生成Imagick图像蒙版图像
- 27. 图像和图层(HTML5,canvas,JS,CSS ??)
- 28. PHP:如何使用alpha蒙版为图像创建阴影
- 29. 为什么我的图像变成负面使用SVG蒙版
- 30. html5 canvas作为应用程序
是,如果在遮罩图像上确实存在透明区域,则可以使用'drawImage()'在画布顶部绘制图像。透明部分将让底层图像/画布闪耀。 – devnull69
这不是我的意思,我希望形状可以剪切图像,以便图像的其余部分变得透明。 – Jaap