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