Fabric js将对象剪辑到背景图像答案

【问题标题】：Fabric js clip object to background imageFabric js将对象剪辑到背景图像
【发布时间】：2016-02-01 06:11:58
【问题描述】：

我正在研究fabric js，我遇到了一个问题，我必须将用户添加的对象（文本、图像、svg 等）剪辑到画布中设置的背景图像。背景图像可以是 png 或 svg（具有多个路径）。背景图片形状不统一，如树叶、衬衫等。

怎么可能？

【问题讨论】：

您的问题完全不能接受，抱歉； stackoverflow.com/help/mcve

【解决方案1】：

var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/commons/a/a2/Litchi_chinensis_leaf.png',
  function(img){
img.scale(0.3);
canvas.setBackgroundImage(img);
canvas.renderAll();
  }
);

var rect = new fabric.Rect({
  width:80, height:100, fill:'red',
  globalCompositeOperation: 'source-atop',
  top: 100
});
canvas.add(rect);

var circle = new fabric.Circle({
  radius:80, height:100, fill:'blue',
  globalCompositeOperation: 'source-atop'
});
canvas.add(circle);
circle.center().setCoords();

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

这个 sn-p 告诉你什么是可行的。用“图像”来剪辑并不容易。您可以做的是使用我向您展示的 globalCompositeOperation。

如您所见，矩形和圆形仅在背景上可见，而在外部不可见。

如果您想使用“source-atop”以外的其他值，您可以获得不同的效果。使用“source-in”，背景将是透明的，并且是“剪切”该区域的唯一方式

【讨论】：

@AdreaBogazzi 是否也可以使用文本对象？
文本对象在地面还是前景？
无论如何，都可以使用文本作为形状来剪切图像或使用图像作为形状来剪切文本。
我使用了 globalCompositeOperation 但如果您查看我给出的示例，则无法正常工作
请打开另一个堆栈溢出问题，说明您从这个答案中获取了代码并且您无法使其工作。我愿意提供帮助，但我需要一个简单的模型“问题 + 失败代码示例”我没有那么多空闲时间。