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>

在fabricjs中从PNG创建路径

1 个答案: