【问题标题】:Fabric.js how to clip by imageFabric.js如何按图像剪辑
【发布时间】:2016-05-27 23:17:02
【问题描述】:

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

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

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

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

【问题讨论】:

    标签: javascript html5-canvas fabricjs mask


    【解决方案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" width="400" height="400" style="border:1px solid #ccc"></canvas>

    【讨论】:

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