How to scale an image down to fit inside a canvas, without distorting the image?

Question

I have a fabric js canvas that I allow users to add external images to. Often times the user adds images that are too large to fit the canvas and it's a little difficult for them to re-size them correctly.

I'd like to automatically scale the larger images down so that the image maintains it's aspect ratio but fits on the canvas.

Is there something in the fabric.js api that does this or do I need to calculate a ratio and set the scale x\y?

I've tried this but it distorts the image.

 oImg.set({
                    left: _fabicCanvas.width / 2,
                    top: _fabicCanvas.height / 2,
                    scaleY: _fabicCanvas.height / oImg.height,
                    scaleX: _fabicCanvas.width / oImg.width
                });

Answer 1

1) Determine which dimension is the one which exceeds the size of the window you want to put the image in. If both exceed the size calculate both factors and use the largest:

width_factor = imagewidth / allowable_width
height_factor = imageheight / allowable_height

2) Scale both the height and the width by the same factor. Eg. if the width is exceeded:

factor = imagewidth / allowable_width