CODEWITHSUNDEEP
javascripthtml5-canvasfabricjs
goldjunge
goldjunge

Reputation: 341

Fabric.js setHeight() and scaleToHeight() gives different height values

I have an issue with image resizing. I want to resize an image but without keeping ratio. When I'm using setHeight() it gives me wrong value.

image.setHeight(100);
image.getHeight(); // gives me 140px output

When I'm using scale function all is correct, but it keeps image ratio also

image.scaleToHeight(100);
image.getHeight(); // correct 100px output

Also this test gives me strange values:

console.log("h: " + image.getHeight()); // 348.25870646766174
image.set({ height : image.getHeight()-10 });
console.log("h: " + image.getHeight()); // 235.6030791317047

EDIT:

More code:

var flatImage = document.getElementById("flat-image");

var canvas = new fabric.Canvas("frame-canvas",{                         
        width: 992,
        height: 450
});

var image = new fabric.Image(flatImage, {});
    image.selectable = false;
    // image.scaleToWidth( 250 );

canvas.add(image);
canvas.centerObject(image);
canvas.renderAll();

console.log("h: " + image.getHeight()); // 334
image.set({ height : image.getHeight()-10 });
console.log("h: " + image.getHeight()); // 324 works good

But when I add scaleToWidth() height values gets strange:

image.scaleToWidth( 250 );

console.log("h: " + image.getHeight()); // h: 166.66666666666666
image.set({ height : image.getHeight()-10 });
console.log("h: " + image.getHeight()); // h: 78.17697937458415

Basically cut on half and then subtracts given value.

Why is that ?

Upvotes: 5

Views: 5450

Answers (1)

Theo Itzaris
Theo Itzaris

Reputation: 4681

the snippet looks fine. I can't think any other reason for getting different values, just please take a look on the scale properties img.scaleX and img.scaleY and make sure that they are equal 1, otherwise that causes the problem.

good luck

Upvotes: 3

Related Questions