Fabric.js如何按图像剪辑

Posted 2023-03-23

【中文标题】Fabric.js如何按图像剪辑

【英文标题】：Fabric.js how to clip by image

【发布时间】：2016-05-27 23:17:02

【问题描述】：

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

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

在我的 JSFiddle 中，我的目标是将 logo 和 pugImg 夹在 this picture 内（或者任何你想要的图片）。好吧，反正我连一张图片都遮不住，所以如果这不打扰你，请更新 JSFiddle 以获得更好的解释。

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

【参考方案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' 在另一个图像上绘制另一个图像

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"   style="border:1px solid #ccc"></canvas>

【讨论】：

我们如何为文本对象做这件事，就像文本一样。住在里面的形状