Fabric.JSで既に設定されているイメージの背後にあるコンピュータから画像を追加するにはどうすればよいですか？

Question

私は内部に透明なフレームを持つ画像を持っています。これは、CSSを使用してキャンバスの背景として設定されています。キャンバスに画像を追加することはできますが、フレームの透明部分の後ろに一度に1つの画像しか追加できないようにしたいと考えています。どうすればこれを達成できますか？前もって感謝します！

var id = document.getElementById('rectangle') && rectangle || 
 
    document.getElementById('anotherCanvas') && anotherCanvas; 
 
var canvas = new fabric.Canvas(id); 
 

 
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({ 
 
       width: 125, 
 
       height: 170 
 
      }) 
 
      canvas.add(oImg).renderAll(); 
 
      var a = canvas.setActiveObject(oImg); 
 
      var dataURL = canvas.toDataURL({ 
 
       format: 'png', 
 
       quality: 1 
 
      }); 
 
     }); 
 
    }; 
 
    reader.readAsDataURL(file); 
 
});

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

 
#rectangle { 
 
    background: url(http://i.imgur.com/0Mt6ho1.png); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
}

<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="rectangle" width="637" height="412"></canvas>

Answer 1

あなたfabricjs画像オブジェクトに追加してくださいトップのプロパティを左：

var oImg = img.set({ 
       width: 125, 
       height: 170, 
       left: 430, 
       top: 65 
      }) 

あなたが背景画像を使用してはならないの後ろにアップロードされた画像を作るために。コントロールなしで正規の画像を挿入する必要があります。

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

あなたが画像をアップロードするときに、あなたは、それを選択したことを確認する必要があります背後に移動し、選択を解除：このような何か

fabric.Image.fromURL(data, function (img) { 
      var oImg = img.set({ 
       width: 125, 
       height: 170, 
       left: 430, 
       top: 65 
      }) 
      canvas.add(oImg); 
      canvas.setActiveObject(oImg); 
      var image = canvas.getActiveObject(); 
      image.moveTo(-1); 
      canvas.discardActiveObject(); 
      canvas.renderAll(); 
     }); 

あなたはマウスでオブジェクトを選択する場合は、それが自動的に移動しますオブジェクトを一番上に移動しますが、選択を解除すると再び移動します。

チェックこのfiddle