如何在fabric.js中設置圖片的高度和寬度？

Question

我已經使用fabric.Image.fromURL在畫布中加載圖像，並使用默認圖像寬度和高度正常工作。 現在我想盡量減少圖像的寬度和高度。 如何做到這一點？

在此先感謝。

Answer 1

使用圖像縮放屬性而不是圖像大小。這對我有效。當我設置圖像的寬度和高度而不是比例時，當我應用濾鏡時，它會重置爲原始寬度和高度，因爲比例爲1.0。希望這可以幫助。

Answer 2

我們可以使用scalex/scaley來設置高度/寬度如下。

fabric.util.loadImage(imgsrc, function (img) { 
    var legimg = new fabric.Image(img, { 
     left: 30, 
     top: marker.top, 
     scaleX: 20/img.width, 
     scaleY: 20/img.height 
    }); 
    canvas.add(legimg); 
    canvas.renderAll(); 
}); 

感謝

Answer 3

var canvas = new fabric.Canvas('canvas'); 
 
document.getElementById('file').addEventListener("change", function (e) { 
 
    var file = e.target.files[0]; 
 
    var reader = new FileReader(); 
 
    reader.onload = function (f) { 
 
    var data = f.target.result;      
 
    fabric.Image.fromURL(data, function (img) { 
 
     var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9); 
 
     canvas.add(oImg).renderAll(); 
 
     var a = canvas.setActiveObject(oImg); 
 
     var dataURL = canvas.toDataURL({format: 'png', quality: 0.8}); 
 
    }); 
 
    }; 
 
    reader.readAsDataURL(file); 
 
});

canvas{ 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
<input type="file" id="file"><br /> 
 
<canvas id="canvas" width="450" height="450"></canvas>

我們可以設置寬度和高度。

入住此的jsfiddle：https://jsfiddle.net/varunPes/8gt6d7op/5/

Answer 4

希望這將有助於

var src; //Image source here 
fabric.Image.fromURL(src, function(oImg) { 
    oImg.scaleToWidth(50); 
    oImg.scaleToHeight(50); 
});