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);
}
}
}
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.
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.
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.
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With