CODEWITHSUNDEEP
javascripthtmlcanvasfabricjs
Abhinav
Abhinav

Reputation: 8168

How to resize image in canvas proportionately with respect to width in fabricjs?

The minimum width of the image should be 300 and the height should get scaled proportionately with respect to width.

Suppose the user uploads image size of 5ooX850, I will use

                Img.set({
                    scaleX: 300 / Img.width,
                });

But how to scale image height with respect to width?

Upvotes: 8

Views: 13179

Answers (2)

Sanjib Debnath
Sanjib Debnath

Reputation: 3795

Set in image object 

/*scaleToWidth(value, absolute)*/
Img.scaleToWidth(300, false);

this is the link for doc

Upvotes: 8

J. Titus
J. Titus

Reputation: 9690

Scale Y by the same ratio used to scale X

let scale = 300 / Img.width;

Img.set({
    scaleX: scale,
    scaleY: scale
});

With your example of 500 x 850, both X and Y would be 3/5 of their original measurements.

Upvotes: 11

Related Questions