Get and modify object from loadFromJSON FabricJS

Question

the case is:

First, load photo to canvas as background image, and i dont want background moving and send image to back, so i added following code:

$('#upload').change(function(){
            canvas.clear();
            var filename = "{{ url_for('static', filename='layout/') }}"+$(this).val();
            if (filename != "" && filename != null){
                fabric.Image.fromURL(filename, function(oImg) {
                    oImg.scaleToWidth(canvas.width);
                    oImg.scaleToHeight(canvas.height);
                    oImg.set({ 
                        hasControls: false, 
                        hasBorders: false, 
                        selectable: false,
                    });
                    canvas.add(oImg);
                    canvas.sendToBack(oImg);
                });
            }else {
                alert('no file choosen');
            }
        });

I saved it, and when i try to load it with loadFromJSON, function in $('#upload').change(...) is not called at all ..

$('#upload_existing').change(function(){
            canvas.clear();
            var json = JSON.parse($(this).val());
            canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
                // console.log(object);
                fabric.canvas.sendToBack(o, object);
                // canvas.sendToBack(o[0]);
            });
            
        });

Answer 1

Fabric.JS includes background image functionality so that you don't have to load it as a regular image and try to keep it at the bottom. http://fabricjs.com/docs/fabric.Canvas.html#setBackgroundImage

canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
  left: 400,
  top: 400
});

Answer 2

i got an solution:

    $('#upload_existing').change(function(){
        canvas.clear();
        var json = JSON.parse($(this).val());
        canvas.loadFromJSON(json, function() {
            var objects = canvas.getObjects();
            objects[0].scaleToWidth(canvas.width);
            objects[0].scaleToHeight(canvas.height);
            objects[0].set({ 
                hasControls: false, 
                hasBorders: false, 
                selectable: false,
        });
        canvas.sendToBack(objects[0]);
            
            // if you need to iterate objects :
            // var objects = canvas.getObjects();
            // for (var i = 0, len = objects.length; i < len; i++) {
                // console.log(objects[i])
            // }
        });
        
    });

sorry for worse code