Fabricjs Resize after upload image

Question

How I can resize uploaded image before apply in canvas? My Codes are as follow:

HTML:

<input type="file" id="imgLoader">

JS:

$("#imgLoader").change(function(){
                var file = this.files[0];               
                importImage(file);
            });
function importImage(e){
         var reader = new FileReader();
         reader.onload = function (event) { 
            var imgObj = new Image();
            imgObj.src = event.target.result;
            imgObj.onload = function () {
                var image = new fabric.Image(imgObj);
                image.set({
                    //left: 250,
                    //top: 250,
                    angle: 0,
                    padding: 5,
                    cornersize: 10
                });
                canvas.add(image);

            }
        }
        reader.readAsDataURL(e);
     }

How can I implement it so that images will be resize in fixed width & height before apply in canvas?

Answer 1

Try this:

function importImage(e){
         var reader = new FileReader();
         reader.onload = function (event) { 
            var imgObj = new Image();
            imgObj.src = event.target.result;
            imgObj.onload = function () {
                var image = new fabric.Image(imgObj);
                image.set({
                    //left: 250,
                    //top: 250,
                    angle: 0,
                    padding: 5,
                    cornersize: 10
                });
                image.filters.push(new fabric.Image.filters.Resize({scaleX: 0.2, scaleY: 0.2}));
                image.applyFilters(canvas.renderAll.bind(canvas));
                canvas.add(image);

            }
        }
        reader.readAsDataURL(e);
     }