Fabric.js如何按图像剪辑

Question

标题说明了一切。您可以看到Fabric.js蒙版过滤器演示。这应该很简单，但是我找不到将蒙版应用于Fabric.js的任何示例。

我正在尝试向我的JSFiddle应用蒙版。http://jsfiddle.net/ZxYCP/342/

从我的jsfiddle，我的目标是同时拥有logo和pugImg剪辑内这张图片（或任何图片，如果你想）。好吧，我什至无法掩盖一张图片，因此，如果这不打扰您，请更新JSFiddle以获取更好的解释。

此外，Fabric.js <3的创建者@kangax的代码在此问题中应该是解决方案，但我无法正常工作。结果应类似于下图。任何进一步的建议表示赞赏。

Answer 1

您不是真的尝试遮罩图像。您正在使用一些合成效果。有几件要理解的与fabric.js不直接相关的事情。

蒙版覆盖图像。

您发布的演示链接不会使您获得如屏幕截图所示的效果。

在这种情况下，您应该具有：

• 浅蓝色的帆布

• 一个pug.jpg图像

• 白色，上面overlay image有一个女孩形的透明孔

用这些3做一个三明治。在这种情况下，您是masking画布，而不是图像。

如果您的路径是女孩形的，则可以按照以下步骤裁剪画布：

Fabric.js将画布（或对象组）剪辑为多边形

但您声明要使用图像代替。因此，如果您的叠加层没有女孩形的孔，则可以使用另一种解决方案来获得相同的效果：

• 透明的画布

• 具有所需形状和周围透明像素的浅蓝色图像

• 一个pug.jpg图像

在画布上添加第一个图像；将globalCompositeOperationpug.jpg的设置为'source-atop'在另一图像上绘制另一图像

var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('http://fabricjs.com/assets/2.svg', function(img){
  img1 = img;
  fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img){
    img1.scaleToWidth(canvas.getWidth());
    img2 = img;
    img2.scaleToHeight(300);
    img2.left = 50;
    img2.top = 50;
    img2.globalCompositeOperation = 'source-atop';
    canvas.add(img1);
    canvas.add(img2);
  });
});

<script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>