CODEWITHSUNDEEP
fabricjs
user1584122
user1584122

Reputation: 91

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.

Upvotes: 9

Views: 32646

Answers (6)

Abubakar Mughal
Abubakar Mughal

Reputation: 41

Well I am not sure how are you trying to do it but you could while adding the image use canvas object in the editor and pass it the Image in a function called centerObject. Here is the code that worked for me.

My ReactJS code centers a shirt image in the canvas as given below

const { editor, onReady } = useFabricJSEditor()
const add_image = () => {
    fabric.Image.fromURL('assets/custom/shirt_green.png',(oImg) => {
        oImg.scaleToHeight(240)
        oImg.scaleToWidth(240)
        editor.canvas.add(oImg)
        editor.canvas.centerObject(oImg)
    })
}

Over to the frontend UI we render using

     <div>
         <FabricJSCanvas className={styles.canvas} onReady={onReady} />
     </div>

Upvotes: 0

Omkar
Omkar

Reputation: 109

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

Upvotes: 1

Varun Sharma
Varun Sharma

Reputation: 4842

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 width and height.

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

Upvotes: 1

saad
saad

Reputation: 1364

Hope this will help

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

Upvotes: 18

Frederic Anand
Frederic Anand

Reputation: 66

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

Upvotes: 15

Rob R
Rob R

Reputation: 181

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.

Upvotes: 0

Related Questions