Fabricjs上传图片后调整大小

Question

如何在应用于画布之前调整上传图像的大小？我的代码如下：

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);
     }

如何实现它以便图像将以固定宽度和大小调整大小。在画布中应用前的高度？

Answer 1

试试这个：

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);
     }