Hi all, I’ve tried looking around the web for a solution but have so far failed. I want to enable a user to upload an image (which I have done) but if it’s a landscape image then I want to resize the horizontal and automatically recalculate the height and if it’s a portrait image then for it to resize the height and recalculate the width. Any ideas as to how this can be done?
Loads of posts in this section of the forum - try searching for resize, thumbnail etc.
The simplest way to achieve this is to use CSS – background-size: contain. However, it is not supported by all browsers, so you will need to determine whether it is a viable solution for your circumstances. The other sacrifice that is necessary is using a div or span with a background image rather than an image tag. Though, it is really a small sacrifice to make considering the many advantages of using a background image – resizing and centering easily.
Hi there, I was hoping to do this while the user uploads their photo rather than taking the CSS route. I’ve also taken a look through the forums and haven’t found anything of substance as yet.
There is one on this very page that does what you want started on 1 Nov: http://www.sitepoint.com/forums/showthread.php?794317-Image-upload-and-resize-what-is-the-best-way
This is a script I wrote some time ago to resize images.
Feel free to use it as is or tweak it to suit your needs.
<?php
/*************************************************************************
This script resizes an image so that it fits within a user specified
max_width and max_height.
The script automatically detects jpg, png and gif image format files.
Input Parameters:
-----------------
pic = path to image to be resized.
maxWidth = maximum width.
maxHeight = maximum height.
*************************************************************************/
//get the passed data, validate it and assign it to variables
$image = $_GET['pic'];
if(!isset($_GET['maxWidth']) || !isset($_GET['maxHeight']) ||
!is_numeric($_GET['maxWidth']) || empty($_GET['maxWidth']) ||
!is_numeric($_GET['maxHeight']) || empty($_GET['maxHeight']) ||
$_GET['maxWidth'] <= 0 ||
$_GET['maxHeight'] <= 0)
{
$max_width = 70; //default value
$max_height = 70; //default value
}
else
{
$max_width = $_GET['maxWidth'];
$max_height = $_GET['maxHeight'];
}
//get the original image attributes
$size = GetImageSize($image);
$width = $size[0];
$height = $size[1];
$imageType = $size[2];
//scaling factors
$xRatio = $max_width / $width;
$yRatio = $max_height / $height;
//calculate the new width and height
if($width <= $max_width && $height <= $max_height) //image does not need resizing
{
$toWidth = $width;
$toHeight = $height;
}
else if($xRatio * $height < $max_height)
{
$toHeight = round($xRatio * $height);
$toWidth = $max_width;
}
else
{
$toWidth = round($yRatio * $width);
$toHeight = $max_height;
}
//create the resized image
//Type of image 1=GIF 2=JPG 3=PNG 4=SWF 5=PSD 6=BMP 7=TIFF(intel byte order) 8=TIFF(motorola byte order) 9=JPC 10=JP2 11=JPX 12=JB2 13=SWC 14=IFF 15=WBMP 16=XBM
$newImage = ImageCreateTrueColor($toWidth,$toHeight); //create the new image canvas
switch ($imageType)
{
case 1: //gif file
$oldImage = ImageCreateFromGif($image);
break;
case 3: //png file
$oldImage = ImageCreateFromPng($image);
break;
default: //jpg file
$oldImage = ImageCreateFromJpeg($image);
break;
}
ImageCopyResampled($newImage,$oldImage,0,0,0,0,$toWidth,$toHeight,$width,$height); //resize the new image
//output the new resized image
switch ($imageType)
{
case 1: //gif file
header('Content-type: image/gif');
ImageGif($newImage);
break;
break;
case 3: //png file
header('Content-type: image/png');
ImagePng($newImage);
break;
default: //jpg file
header('Content-type: image/jpeg');
ImageJpeg($newImage);
//ImageJpeg($newImage,'newImage.jpg', -1);
break;
}
//clean up resources
ImageDestroy($oldImage);
ImageDestroy($newImage);
?>