javascriptjqueryalgorithmimage-processingimage-resizing

Algorithm to resize an image proportionally keeping it as close as possible to given dimensions


Example

myFunction(400, 300, 50, 100) => Must return the width and heigth to resize my 400x300 (1st and 2nd params) image proportionally. The resized image must be at minimum 50x100 (3rd and 4th params). It's totally ok to go 52x.. or ..x102 but the "oversize" must be as small as matematically possible to keep the aspect ratio.

Details

I must write a function (I will use Javascript/Jquery, but let's not worry about the language: I'm interested in the logic) such as this:

[new_image_width, new_image_height] function(image_width, image_height, reference_width, reference_height)

This function takes:

It returns:

The function must calculate the closest width and height to respective "reference" parameter, without going below, and preserving the aspect ratio.

My function must not actually resize the image, only return the new integer to resize to.

Note: I'm confortable with code but 1st-grade-level with math. Please show some mercy :-(


Solution

  • If you don't care about rounding errors

    Let

    ratio = min(image_width / reference_width, image_height / reference_height)
    

    and return

    image_width / ratio
    image_height / ratio
    

    If you do care about rounding errors

    Find the greatest common divisor GCD of image_width and image_height. The smallest image you can make with the exact same aspect ratio has dimensions

    image_width' = image_width / GCD
    image_height' = image_height / GCD
    

    Every larger image with the exact same aspect ratio is an integer multiple of those. So, let

    ratio_width = ceil(reference_width / image_width')
    ratio_height = ceil(reference_height / image_height')
    

    and

    ratio = max(ratio_width, ratio_height)
    

    then your result is

    ratio * image_width'
    ratio * image_height'