Comment limiter une image à une autre image dans fabricjs?

Question

J'ai une image de cadre avec un centre transparent et un bouton qui dessine une image locale derrière cette image (donc ça a l'air encadré). Comment puis-je confiner l'image téléchargée à l'image? J'ai essayé d'utiliser une image de cadre sans zone environnante transparente, mais je voudrais éventuellement utiliser des arrière-plans.

Je travaille avec différents cadres de différentes tailles. Comment pourrais-je accomplir cela? Toute aide serait grandement appréciée. J'ai bricolé avec ça pendant des jours. Je vais joindre mon code et une image pour aider à mieux montrer le problème. Merci d'avance!

var canvas = new fabric.Canvas('c'); 
 

 
document.getElementById('file').addEventListener("change", function(e) { 
 
    var file = e.target.files[0]; 
 
    var reader = new FileReader(); 
 
    reader.onload = function(f) { 
 
    var data = f.target.result; 
 
    fabric.Image.fromURL(data, function(img) { 
 
     var oImg = img.set({ 
 
     scaleX: 0.8, 
 
     scaleY: 0.8, 
 
     left: 430, 
 
     top: 65 
 
     }) 
 
     canvas.add(oImg); 
 
     canvas.setActiveObject(oImg); 
 
     var image = canvas.getActiveObject(); 
 
     image.moveTo(-1); 
 
     canvas.discardActiveObject(); 
 
     canvas.renderAll(); 
 
    }); 
 
    }; 
 
    reader.readAsDataURL(file); 
 
}); 
 

 
fabric.Image.fromURL('https://i.imgur.com/OeXL2CJ.png', function(img) { 
 
    var oImg = img.set({ 
 
    scaleX: 0.5, 
 
    scaleY: 0.5, 
 
    selectable: false 
 
    }) 
 
    canvas.add(oImg).renderAll(); 
 
});

canvas { 
 
    border: 1px solid #808080; 
 
    border-radius: 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
<input type="file" id="file"><br /> 
 
<canvas id="c" width="637" height="412"></canvas>

Answer 1

Ici, vous allez compagnon. La quintessence de la réponse est la même:

var pug = new fabric.Image(pugImg, { 
     width: 500, 
     height: 300, 
     cropX: 0, 
     cropY: 0, 
     left: 10, 
     top: 10 
    }); 

Mais peut-être que c'est plus complet avec un violon. Et il est une belle Pug ;-)

http://jsfiddle.net/sharksinn/5vyevd5y/

Et Veuillez ajouter les indicateurs comme la bonne réponse si cela vous fixe problème :-)

Answer 2

Si je vous comprends bien, vous voulez montrer votre deuxième image que dans la zone centrale de l'image de votre cadre. Vous devriez être capable de le faire avec la nouvelle version bêta de Fabrc 2. Le tissu 2 introduit de nouveaux paramètres pour les onbects d'image: scaleX, scaleY, width, height, cropX, cropY ...

Réglage de l'origine de l'objet des deux images au centre/milieu et réglage de la largeur/hauteur et cropX/cropY de votre deuxième image devrait faire l'affaire.

Voici la documentation pour les nouvelles fonctionnalités:

http://fabricjs.com/v2-breaking-changes#image