无法使用 canvas.getObjects() 获取图像；

Question

为什么下一个函数找不到图像（当我使用调试器检查时，我可能会看到所有其他元素，但看不到图像）

function getItemByName3(name) {
     var object = null,
          objects = canvas.getObjects();
          objectsCount=canvas.getObjects().length;
     for (var i = 0, len = objectsCount; i < len; i++) {
       if (objects[i].type && objects[i].type == "image"){
            if (objects[i].id && objects[i].id===name) {
              object = objects[i];
             break;
            }
        } 
      }
      return object;
    }

     function backgroundSaveToJsonF(){                 ////____________________________________________saveJsonF;
    var backgroundImage=getItemByName3(document.getElementById("selectProject").value+"imageID");
    var backgroundImageForDB=JSON.stringify(backgroundImage.toObject(['id','sendToBack','selectable']));

我正在使用下一个代码将图像上传到画布：

document.getElementById('imgLoader').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({
                left: 0,
                top: 0,
                angle: 00,
                width: canvas.width,
                height: canvas.height,
                id:document.getElementById("selectProject").value+"imageID"
            });
            canvas.setBackgroundImage(oImg).renderAll();
            var dataURL = canvas.toDataURL({
                format: 'png',
                quality: 0.8
            });
        });
    };
    reader.readAsDataURL(file);

});

谢谢

Answer 1

演示

document.getElementById('imgLoader').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({
                left: 0,
                top: 0,
                angle: 00,
                width: canvas.width,
                height: canvas.height
            });
            //canvas.setBackgroundImage(oImg).renderAll();
            canvas.add(oImg);
            console.log(canvas.getObjects());
            var dataURL = canvas.toDataURL({
                format: 'png',
                quality: 0.8
            });
        });
    };
    reader.readAsDataURL(file);
});

var canvas = new fabric.Canvas('c');
canvas.add(new fabric.Rect({
    left: 50,
    top: 50,
    height: 100,
    width:100,
    stroke: 'red',
    fill: ''
}))
canvas.add(new fabric.Text('1',{
    left: 20,
    top: 50,
    stroke: 'red',
    fill: ''
}))
canvas.renderAll();

canvas{
 border:2px dotted blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script>
<input type="file" id="imgLoader" accept="image/*"> <br>
<canvas id='c' width='400' height='400'></canvas>

这是因为您将上传的图像设置为背景图像canvas.setBackgroundImage(oImg) 您没有将其作为对象添加到画布。如果您想在对象列表中获取它，请添加为对象canvas.add(oImg)。查看演示。