Fabric.js如何按图片

Question

标题说明了一切。你可以看到Fabric.js Mask Filter Demo。这应该很简单，但我找不到任何将掩码应用于Fabric.js的例子。

我正在尝试将mask应用于我的JSFiddle。 http://jsfiddle.net/ZxYCP/342/

从我的JSFiddle中，我的目标是将logo和pugImg同时剪切在this picture内（或任何图片，如果你想要的话）。好吧，我甚至无法掩盖一张图片，所以如果这不打扰你，请更新JSFiddle以获得更好的解释。

此外，@ kangax的代码，Fabric.js＆lt; 3，in this question的创建者应该是解决方案，但我无法工作。结果应该如下图所示。任何进一步的建议表示赞赏。

Answer 1

你并不是真的试图掩盖一个图像。您正在使用一些合成效果。 有几点需要理解，与fabric.js没有直接关系。

掩码覆盖图像。

您发布的演示链接不会让您获得屏幕截图中的效果。

如果是这种情况，您应该：

• 浅蓝色帆布

• pug.jpg图片

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

与那些3做三明治。 在这种情况下，你是masking画布而不是图像。

如果你有一个女孩形状的路径，你可以剪切画布，如下所示：

Fabric.js Clip Canvas (or object group) To Polygon

但是您声明要使用图像。 因此，如果您没有带有女孩形状的洞的叠加层，您可以使用其他解决方案来获得相同的效果：

• 透明画布

• 带有您需要的形状的浅蓝色图像和周围的透明像素

• pug.jpg图片

在画布上添加第一个图像; 将pug.jpg的globalCompositeOperation设置为“source-atop＆＃39; 将另一个图像绘制在另一个图像上

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;