javascript - 在fabricjs中从PNG创建路径

Question

• 我有一个带有透明区域的 PNG 图像。
• 我有一张照片。
• 我正在使用 FabricJS

我需要创建一个裁剪到 PNG 透明区域的新图像。

我知道我可以使用 ClipTo(path) 函数来创建新图像。

但是，我的问题是首先创建路径。如何从 PNG 的透明区域创建路径？

提前致谢。

Answer 1

尽管看起来很奇怪，但我无法找到正确的重复项...

<小时/>

您不需要从位图计算路径。 CanvasRenderingContext2d API 提供了一些 compositing and blending options ，这将允许您直接使用位图。

fabricjs 还提供此选项:http://fabricjs.com/docs/fabric.Object.html#globalCompositeOperation

var c = new fabric.Canvas('c', {
  imageSmoothingEnabled: false
});
fabric.Image.fromURL(
  'https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png',
  function(image1) {
   fabric.Image.fromURL(
    'https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg',
    function(image2) { // the one to be clipped
      c.add(image1);
      c.add(image2);
      c.renderAll();
   }, {
    globalCompositeOperation: 'source-in', // will be drawn only where pixels are already drawn
    top: -300,
    left: -400
  });

}, {
  width: 200,
  height: 200
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.js"></script>
<canvas id="c" width="500" height="500"></canvas>