How to resize pictures in PHP

The web nowadays requires a level of interactivity never seen before. People love commenting and building communities, and a huge part of that is putting a face to your online presence. To this effect there is a big demand for image processing techniques using web based languages. My web language of choice is PHP and so here is a short walkthrough, including code, on how to create a picture resizing function.

This function can both keep the aspect ratio of the picture, or force the picture to fit the new dimensions. It is designed for jpeg pictures but can easily be extended to cater for gif and png.

The first thing you need to do is create your form in your web page. This basically requires you to set a flag in the form tag like so:

<form name="myForm" action="uploadpic.php" method="post" enctype="multipart/form-data" />

The enctype flag basically tells the browser to break the form objects down and send in chunks. This is transparent to the user, and to the PHP script receiving the data. But is useful to know.

You will then need a form element with type "File" which will give you the typical input box with a browse button to allow your users to search for the file they want to upload.

<input name="userfile" type="file" size="40" />

Now we need a PHP file to receive the file, we are assuming you have a file called uploadpic.php, within your form handling code you should have something like this to call the function we are about to write:

if (@is_uploaded_file($_FILES["userfile"]["tmp_name"]))
{
$img_name = resizePic("player","userfile","../picupload/",150,150,0,"destination_name.jpg");
}

$_FILES is a server variable containing an array of the uploaded files, note that "userfile" is the name of the form element we specified earlier, the tmp_name is the temporary name given to the object when its uploaded. The first line basically confirms the file was uploaded ok. The second line calls our function resizePic and stores the contents into a variable called $img_name. The return value of the function is discussed later.

OK now onto our function definition, we saw the variables passed to it in the previous section of code, now we can see what each parameter does.

function uploadPic($prefix,$formSrc,$dDir,$maxWidth,$maxHeight,$resizeFlag,$tempName) ;

• The $prefix parameter defines the prefix for all images uploaded, if left blank no prefix is given. This is so we could have all our images renamed to news_00001.jpg etc.
• The $formSrc parameter simply passes the name of our form element to the function, so it can find the file we uploaded.
• $dDir is the destination directory for the image
• $maxWidth is obviously the maximum width the picture can have
• $maxHeight performs similarily
• $resizeFlag defines whether the image should keep its original aspect ratio
• And finally $tempName defines the name of the image

OK now to flesh out our function. Our first job is copy the temporary image so that we can work on it without fear of it getting deleted as it is currently held in a temporary folder on the server.

if (!copy($_FILES[$formSrc]["tmp_name"],$dDir.$_FILES[$formSrc]["name"])) {
print ("failed to copy $file...
\n");
}

This code will copy the file, with its current file name, to our destination folder.

If no $tempName was given we want to create a random name for the image, we do this simply by concatonating the prefix and a random number like so:

if ($tempName == "") { $tempName = $prefix."_".mt_rand().".jpg"; }

Next we need to create a few variables to store the location and names of our source image, and the eventual location of our finished image.

//hard copy of picture
$src_img = $dDir.$_FILES[$formSrc]["name"];

//destination
$dest = $dDir.$tempName;

We now need to get a little information about our file, confirm its an image, and find out its current dimensions. This is done easily with a function call to one of the PHP GD APIs.

//get source dimentions
$src_dims = getImageSize($src_img);

Now we have our image information we need to then create a temporary image in memory and deal with each image type seperately, for the sake of this tutorial I am simply going to concentrate on jpeg only, the case statements for other types are left in though and it will only take a small amount of work to alter the function to work with all image types.

//create appropriate temp image
switch ($src_dims[2]) {
case 1: //GIF
break;

case 2: //JPEG
$srcImage = imageCreateFromJpeg($src_img);
break;

case 3: //PNG
break;

default:
return false;
break;
}

Next we need to find out if we want to keep the aspect ratio, if so resize using a divisor, else just force the image to the correct dimensions. This is done by finding out how the image dimensions compare to our desired dimensions then dividing or multiplying accordingly.

$srcRatio = $src_dims[0]/$src_dims[1]; // width/height ratio
$destRatio = $maxWidth/$maxHeight;

if ($destRatio > $srcRatio) {
$destSize[1] = $maxHeight;
$destSize[0] = $maxHeight*$srcRatio;
}
else {
$destSize[0] = $maxWidth;
$destSize[1] = $maxWidth/$srcRatio;
}

//if set image dimensions are required:
if ($resizeFlag == 1) {
$destSize[0] = $maxWidth;
$destSize[1] = $maxHeight;

}

As you can see we now have an array called $destSize which contains the final height and width of our image. All we have to do now is create a new image in memory to the correct dimensions, then copy our source image into that new placeholder. We will use a function called imageCopyResampled to achieve this which usually gives the best results when resizing.

$thumb_w = $destSize[0];
$thumb_h = $destSize[1];
$dst_img = imageCreateTrueColor($thumb_w,$thumb_h);
imageCopyResampled($dst_img,$srcImage,0,0,0,0,$thumb_w,$thumb_h,$src_dims[0],$src_dims[1]);

Our image is almost done, all we need to do now is save our image to the destination folder and delete any temporary images we created along the way. We then return with our final image name so that the calling function knows the exact name of the image.

switch ($src_dims[2]) {
case 1:
break;
case 2:
imageJpeg($dst_img, $dest, 75); //75 denotes image quality / compression ratio
break;

case 3:
break;
}
//$y++;
unlink($src_img);

return $tempName;

And that is it, you now have a function capable of resizing uploaded images, if you are a basic user this will suit your needs perfectly well. However if you will be doing a vast number of resizes then this code may be slightly slow for your needs and it may well be worth looking into other resize methods that give lower accuracy.

On a final note with regards to performance it is generally much better to resize on upload rather than dynamically when a page is generated. It is a trade off between space and processing time, but if your site is popular then dynamically create each image on the fly can cost a lot in processing time and make your site slow.