Fabric.js如何按图像剪辑 [英] Fabric.js how to clip by image

问题描述

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

The title say it all. You can see Fabric.js Mask Filter Demo. This should be pretty simple but I can't find any example of applying mask to Fabric.js.

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

I am trying to apply mask to my JSFiddle. http://jsfiddle.net/ZxYCP/342/

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

From my JSFiddle, my goal is to have both logo and pugImg clipped inside this picture (or any picture if you want). Well, I can't even mask one picture anyway, so if this is not bothering you, please update the JSFiddle for better explanation.

此外，来自@的代码kangax，Fabric.js的创建者< 3，在这个问题上应该是解决方案，但我无法工作。结果应该如下图所示。任何进一步的建议表示赞赏。

In addition, the code from @kangax, creator of Fabric.js <3, in this question should be the solution but I can't manage to work. The result should be like the image below. Any further suggestion is appreciated.

< img src =https://i.stack.imgur.com/lE8M4.pngalt =在此处输入图像说明>

推荐答案

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

You are not really trying ot mask an image. You are using some compositing effects. There are a couple of things to understand that are not directly related to fabric.js.

掩码覆盖图像。

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

The demo link you posted will not make you get the effect as in the screenshot.

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

If this is the case, you should have:

• 浅蓝色帆布

• a light blue canvas

哈巴狗.jpg图片

白色叠加图片里面有一个女孩形的透明孔

a white overlay image with a girl-shaped transparent hole in it

制作三明治3.
在这种情况下，你是掩盖画布不是图像。

Make a sandwich with those 3. In this case you are masking the canvas not the image.

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

If you have a girl-shaped path, you can clip the canvas as seen in:

Fabric.js Clip Canvas（或对象组）到多边形

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

But you state that you want to use a image instead. So if you do not have the overlay with girl-shaped hole, you can use another solution to get the same effect:

• 透明画布

• a transparent canvas

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

a light blu image with a shape you need and transparent pixels all around

一个pug.jpg图片

a pug.jpg image

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

Add the first image on the canvas; set the globalCompositeOperation of the pug.jpg to 'source-atop' paint the other image over the other

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>

这篇关于Fabric.js如何按图像剪辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！