How to set image height and width in fabric.js?

Question

I uploaded the image to the canvas using fabric.Image.fromURL and worked fine with the default width and height of the image. Now I want to minimize the width and height of the image. How to do it?

Thanks in advance.

Answer 1

We can use scalex / scaley to set the height / width, as shown below.

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

thanks

Answer 2

Hope this helps

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

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> 

We can set the width and height.

Check out this JSfiddle: https://jsfiddle.net/varunPes/8gt6d7op/5/

Answer 4

Work with image scaling properties, not image size. It worked for me. When I set the width and height of the image, not the scale, when I applied the filter, it will reset back to the original width and height, because the scale was 1.0. Hope this helps.