Fabricjs上传图片后调整大小答案

【问题标题】：Fabricjs Resize after upload imageFabricjs上传图片后调整大小
【发布时间】：2015-11-17 18:26:01
【问题描述】：

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

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

如何实现它，以便在应用到画布之前将图像调整为固定宽度和高度？

【问题讨论】：

标签： javascript fabricjs

【解决方案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);
     }

【讨论】：