从布料中的PNG创建路径

Question

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

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

我知道我可以使用clipTo（路径）功能来创建新的图像。

但是，我的问题是首先创建路径。我如何从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>