Fabricjs上传图像后调整大小

Fabricjs Resize after upload image

本文关键字：调整图像 Fabricjs 更新时间：2023-09-26

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

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

我如何实现它，使图像将以固定宽度调整大小&在画布上应用之前的高度？

试试这个：

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