イメージをfabricjs内の別のイメージに制限するにはどうすればよいですか？

Question

私は、透明な中心とそのフレームの後ろにローカル画像を描画するボタン（フレームに見えるので）を持つフレーム画像を持っています。アップロードした画像をフレームに閉じ込めるにはどうしたらいいですか？私は透明な周囲の領域なしでフレーム画像を使用しようとしましたが、最終的に背景を使用したいと思います。

私はさまざまなサイズの異なる形のフレームで作業しています。どうすればこれを達成できますか？どんな助けでも大歓迎です。私はこれを数日間変えてきました。問題をより明確に示すために、コードと画像を添付します。前もって感謝します！

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

あなたがチームメイトを行きます。答えの本質は同じです：

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

しかし、多分それはフィドルでより包括的です。これはあなたの問題を解決するかどうか、これが正解として

Answer 2

私はあなたが右理解していれば、あなたは、あなたのフレーム画像の中間領域にあなたの第二の画像を表示したいと思います。新しいFabrc 2ベータ版でこれを実行できるはずです。ファブリック2には、画像オベーションの新しいパラメータ、scaleX、scaleY、width、height、cropX、cropY ...

の両方の画像のオブジェクト原点を中央/中央に設定して幅/高さを調整し、cropX/cropYのあなたの2番目のイメージはトリックを行う必要があります。ここで

は、新機能のドキュメントである：ここで

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