如何使用Fabric.JS將我的電腦中的圖像添加到已經設置的圖像後面？

Question

我有一個內部透明的圖像。它被設置爲CSS的背景。我可以將圖像添加到畫布上，但希望一次只能添加一張圖像，以便在畫面的透明部分後面添加圖像。我該如何做到這一點？先謝謝你！

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