Upload backgorund image in canvas FabricJS

Question

How can I upload background image in FabricJS Canvas from local using input type file.

I have code for images can I use this code also for background image:

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

    function handleImage(e) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var img = new Image();
            img.onload = function () {
                var imgInstance = new fabric.Image(img, {
                    scaleX: 0.5,
                    scaleY: 0.5
                })

                canvas.add(imgInstance);
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    }

See: JSFIDDLE

Answer 1

yep , you can ,but after loading image , you have to load it from url and after that, place as background

 document.getElementById(id).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) { // add background image canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), { scaleX: canvas.width / img.width, scaleY: canvas.height / img.height }); }); }; reader.readAsDataURL(file); });