Question

Looking for an expression that allows me to accomplish this:

I have an image of arbitrary width/height, whose dimensions I can grab before I draw it.
Because the image may be very large, I want to scale it down.

My canvas is going to have width w and height h.
For illustration purposes let’s just say it’s 320×240.

If the dimensions of the image are equal or smaller than the dimensions of the canvas, then the scale ratio is just 1.
If they are larger, I will scale it proportional to how much larger it is compared to the canvas size.

So for example if my image is 640×480, my scale ratio will be 0.5
If my image is 640×240, my scale ratio would still be 0.5
Similarly if it were 320×480

Can this be written in a single math expression? For ex:

def scale_ratio(canvas_width, canvas_height, image_width, image_height)
   #math formula for calculating scale
   return scale

Answer 1

function scale(canvas_width, canvas_height, image_width, image_height) {
  return Math.min(Math.max(canvas_width / image_width, canvas_height / image_height), 1);
}

EDIT: You might want to do something like this to reduce rounding errors:

var scale_width = image_width;
var scale_height = image_height;
if (image_width > canvas_width || image_height > canvas_height) {
    var image_ratio = image_height / image_width;
    if (image_ratio * canvas_width > canvas_height) {
        scale_width = canvas_height / image_ratio;
        scale_height = canvas_height;
    } else {
        scale_width = canvas_width;
        scale_height = image_ratio * canvas_width;
    }
}