Création d'un chemin à partir d'un fichier PNG dans un fabric 0s

J'ai une image PNG avec une zone transparente.
J'ai une photo.
J'utilise FabricJS

Je dois créer une nouvelle image recadrée à la zone transparente du PNG. Je comprends que je peux utiliser la fonction clipTo (chemin) pour créer la nouvelle image.Création d'un chemin à partir d'un fichier PNG dans un fabric 0s

Cependant, mon problème est de créer le chemin en premier lieu. Comment puis-je créer un chemin à partir de la zone transparente d'un fichier PNG?

Merci d'avance.

Source

2017-09-11 Stuart Brand

Ne pas utiliser clipPath mais compositing. Pas vraiment en tissu donc pas une bonne cible dupe https://stackoverflow.com/questions/25752870/clipping-image-to-image-using-canvas Mais il y en a, j'en suis sûr. – Kaiido

Aussi étrange que cela puisse paraître, je ne pouvais pas trouver un double bon pour cette ...

Vous n'avez pas besoin de calculer un chemin à partir de votre bitmap. L'API CanvasRenderingContext2d offre quelques compositing and blending options, ce qui vous permettra de travailler directement avec les bitmaps.

fabricjs propose également cette option: 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>

Source

2017-09-12 01:05:06 Kaiido

Création d'un chemin à partir d'un fichier PNG dans un fabric 0s

Répondre

Questions connexes