Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Algorithm to resize image and maintain aspect ratio to fit iPhone

I'm creating a web service for an iPhone app to interact with.

When my client uploads images server-side, I want my php script to resize the image, whilst maintaining the aspect ratio, so that it will fit onto the iPhone screen. (i.e. the longest side is <= 960 and the shortest <= 640

I've created a mock-up in JS, simply because I find it easier to do quickly.

I'm pretty sure, though I may be wrong, that this isn't the most efficient way of doing it. Could someone correct me with either better logic (especially the bit at the start), or a more mathematical way of approaching this?

var w = 960, h = 960, new_w, new_h;
if (w >= h && w > 960 || h >= w && h > 960 || w >= h && h > 640 || h >= w && w > 640) {
    if (w > h) {
        if (w>960) {
            new_w = 960;
            new_h = h*(new_w/w);
        }
        if (h>640) {
            new_h = 640;
            new_w = w*(new_h/h);
        }
    }
    else {
        if (h>960) {
            new_h = 960;
            new_w = w*(new_h/h);
        }
        if (w>640) {
            new_w = 640;
            new_h = h*(new_w/w);
        }
    }
}
like image 608
Alex Coplan Avatar asked Oct 23 '11 00:10

Alex Coplan


People also ask

How do I resize an image and keep the aspect ratio?

How to resize the image to a specific aspect ratio? In the Crop Image section, select one of the available ratios from the Aspect Ratio menu or add a custom one. Then click the Resize image to aspect ratio option to resize the image instead of cropping it.

How do you proportionally resize an image?

If the Shift key is held down whilst moving the handle, then the proportions of the object will be preserved. For example, if I hold Shift and drag the bottom edge upwards to reduce the size by half, then the right edge will automatically move to the left to reduce the width of the object by the same amount.


2 Answers

Maybe a slightly shorter routine would be:

// Calculate resize ratios for resizing 
float ratioW = targetWidth / oldWidth; 
float ratioH = targetHeight / oldHeight;

// smaller ratio will ensure that the image fits in the view
float ratio = ratioW < ratioH?ratioW:ratioH;

newWidth = oldWidth*ratio;
newHeight = oldHeight*ratio;

Obviously if the ratio is > 1, then it's enlarging, if < 1 then it's shrinking.

like image 96
DevProd Avatar answered Nov 15 '22 20:11

DevProd


Below, the simplest way I know to keep proportions. Hope it helps.

Javascript

function resize(width, height, maxWidth, maxHeight) {
    var ratio = Math.min(maxWidth / width, maxHeight / height);
    var newWidth = ratio * width;
    var newHeight = ratio * height;

    console.log(newWidth + ' ' + newHeight); // Test

    // Process resizing...
}

resize(1280, 1024, 600, 300);

PHP

function resize($width, $height, $maxWidth, $maxHeight) {
    $ratio = min(array($maxWidth / $width, $maxHeight / $height));
    $newWidth = $ratio * $width;
    $newHeight = $ratio * $height;

    echo $newWidth . ' ' . $newHeight; // Test

    // Process resizing...
}

resize(1600, 1280, 150, 150);
like image 34
Koeta Avatar answered Nov 15 '22 18:11

Koeta