ファブリック内のPNGからパスを作成する

Question

• 透明な領域を持つPNGイメージがあります。
• 写真を掲載しています。
• 私は、PNGの透明領域にトリミングされ、新しいイメージを作成する必要がありFabricJS

を使用しています。

私は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>