how to set height and width of image in fabric.js?

I had loaded image in canvas using fabric.Image.fromURL and working fine with default image width and height. Now I want to minimize width and height of an image. How to do this?

Thanks in advance.

Hope this will help

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

FabricJS scale image to fit width / size, The coordinates depends from this properties: width, height, scaleX, scaleY When set to `true`, object's cache will be rerendered next render call. since 1.7.0 � Also, a better (and correct) way of setting those image properties is to pass them as options (argument) to the setBackgroundImage() method (this may resolve some performance issues), as such : canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), { scaleX: canvas.width / img.width, scaleY: canvas.height / img.height });

We can use scalex / scaley to set height / width as 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

JSDoc: Class: Image, Hello, I had loaded image in canvas using fabric.Image.fromURL and working fine with default image width and height. Now I want to minimize width and height � How to set X, Y Coordinates in canvas image? context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); e.g: sx and sy in HTML canvas drawImage() Method. What is similar to this in fabric.js? How to set position in image in canvas in Fabric js?

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>

How to set width and height of an image?, Image instances, except when image's width, height match fabric.Image Taking an image and doing set Src or swapping the element to draw,� width/height are the size of image element and then there is the scale factor. In theory when the element change, and so change width and height, you should multiply your current scale factor by oldWidth/newWidth for example. This would keep the image the same size. surajwaghmare commented on Apr 29, 2019

This working code I have tested:

fabric.Image.fromURL(el.src, function(image) {
              image.set({
                left: left,
                top: top,
                angle: 0,
                padding: 10,
                cornersize: 10,
                hasRotatingPoint:true
              });

                      image.scaleToHeight(100);
                      image.scaleToWidth(200);

              canvas.add(image);
            });

Image setSrc, setElement and width/height value � Issue #4733 , Previously, when you set width and height on an image element, it resized the entire image to http://fabricjs.com/v2-breaking-changes#image. The width attribute specifies the width of an image, in pixels. Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded.

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

Image gets cropped instead of resized upon applying width and , Install the fabric js libary in react js and initialize it. I want to increase height and width of my svg image same as canvas height and width so that it look like� Fixed Height - width is automatically resized with the same ratio as the height; Scale - the image is scaled so that the width OR height is adjusted correctly for the new dimensions and both axis are scaled similarly. It is then centre cropped. Stretch - each dimension is stretched independently to the new size, without trying to keep the same

Fabricjs scale image, <canvas id="canvas" width="640" height="480"></canvas>. JavaScript + No- Library (pure JS) Tidy. xxxxxxxxxx. 18. 1. var imgURL� Use the buttons and arrows to set the size of your image online. Height and Width show you the actual height and width of the cropped area, Press button to set height and width manually. Use the arrows to crop the area. Height and witdh are shown in the buttons above.

How to add an image to a canvas with Fabric.js - JSFiddle, width: It specifies the width of triangle. height: It specifies the height of triangle. Example: This example uses FabricJS to set the height of a canvas triangle. CSS Setting height and width. The height and width properties are used to set the height and width of an element. The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

Fabric.js, I am trying to stretch the background image so it can fit the canvas size. Image. fromURL(data, function (img) { img.set({ width: canvas.getWidth(), height:� Work with the image scale properties and not the image size. This worked for me. When I had set the image width and height, and not the scale, when I applied a filter it reset back to original width and height because the scale was 1.0. Hope this helps. answered Sep 19 '12 at 14:55 Rob R 91 3 4 |

Comments
  • isn't there a way to use set method to set properties of an object(Image incase of here) for me solution of @user2148228 worked to set any other properties like angle, width, height scal etc
  • what is in your canvas variable?
  • got it. It's basically fabric canvas new fabric.Canvas('idOfCanvasElement');