Fabric.js: Preserve aspect ratio of background image when setting as canvas background

[unitedsol]

I have facing an issue when i set background image on fabric canvas it stretch the image with my fix width and height of canvas but when i use backgroundImageStretch its also stretch and when i upload a bigger image to canvas aspect ratio cannot be same as its was.

can any one tell me what i can do wrong. I want to change the canvas width 100% and height 100% but using setwidth and setheight can change all three uppar-canvas, lower-canvas and container width height,

Here is the solution i found but i did not get on my project working like this.
http://nhnent.github.io/tui.image-editor/latest/tutorial-example01-basic.html#

This upload the background image but every image works fine also it cannot effect the download image.

Thanks in advance.

[asturur]

Please create a fiddle on the latest 1.7 or 2.x version and show what is going wrong for you.
If is a custom code problem you will be invited to handle it on stackoverflow.

[unitedsol]

Hello,

Here is the fiddle link https://jsfiddle.net/unitedsol/my65dk80/2/ please have a look all things works fine according to my situation but when download the image as png for printing i cannot get the original size of image but i get according to the canvas size.

Can you please help.
Regards

[ncou]

I think the situation is normal, because when you export the image it's the canvas width and height who is used.
You can't have the original image file used as background because the data have been modified to be scaled on the canvas width & height.

Perhaps you could store the filereader data in a custom attribute on the canvas object.

[asturur]

@unitedsol the editor you posted is build on top of fabricJS.

Let me understand:

you want have a canvas that is fixed width, the height changes.
The image get fitted in the canvas, but in reality is as big as the original one, just looks smaller?

[unitedsol]

Hello,

Hope you are doing fine,

Thanks for reply, But the issue was same as it was let assume i have a image with Dimension 2366 × 1161 and when i set as a background image with aspect ratio according to canvas size when i download the design it resize the image as it was the canvas width and height in my case the downloaded image size was 677 * 332 how i can download the original image (2366*1161) as its original size.

Regards.

[unitedsol]

yes @asturur you are right can you have any solution for this please.

Regards

[unitedsol]

Hello,
Can any body find the solution for this?

Reegards

[khasman]

Hi @asturur I am also looking for a help on both GitHub and Google group of fabric js
Please have a review on issue I'm facing about aspect ratio of dynamic background images with logo and text items. My concern is related to disturbance of logo and text items on factory size large image

I will explain the process in following case study:
Step 1: Select a base image of width 665 and height 570 and place logo plus text items and its rendering correctly. At the same time I select another base image of width 1733 and height 972, and objective is to render this image with same aspect ratio of first one with relevant positions of logo and text items. At this stage the new large image renders, but the position of logo and text items vary too much as compared to small scale background image.
Thanks and look fwd to your response

[asturur]

Those are specific app helps that find their place on stackoveflow.
Even wanting to help i have no time for each question and each application usecase.

[maxifjaved]

Hi, here is the details how we can set the background image by preserve the aspect ration and setting that image in the center of the canvas.

https://stackoverflow.com/a/59975923/4002866