上传图片后Fabricjs调整大小

Question

如何在申请 canvas 之前调整上传图片的大小？我的代码如下：

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

我如何实现它，以便在 canvas 中应用之前以固定宽度和高度调整图像大小？

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

上传图片后Fabricjs调整大小

Fabricjs Resize after upload image

javascript

fabricjs

HTML:

JS: