Menu
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?
860
With the Select and Move Tool, click the canvas size label or border to select the canvas. Click the canvas border handles to resize the canvas dynamically. When you drag the border handles without using any keyboard modifiers, the canvas resizes non-uniformly. Hold Shift to constrain the resize proportions.
JS and give the width to be cropped of the canvas image in pixels using the cropX property of the image object. Syntax: fabric. Image(image, { cropX:Number });
Let's see a code example to create a Canvas using FabricJS. Since FabricJS works on top of Canvas API, we will create an HTML element using <canvas> tag and give it an id. Further, we will pass that id to the FabricJS API so that it can initialize the FabricJS Canvas instance on the <canvas> tag.
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.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
