如何使用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