Image Manipulation

The writers who contribute stories will probably supply their own photographs to complement the story. We want consistency, but what happens when one writer uploads a large, high quality image and another writer uploads a small thumbnail?

Assuming that the pictures in question are primarily photographs, we can insist on JPEG images only, and take advantage of functions in PHP to manipulate the images. This topic is covered in detail in Chapter 19, "Generating Images."

We have created a simple script called resize_image.php that will resize an image on-the-fly so that it can be displayed with an <IMG SRC> tag. This script is shown in Listing 26.1.

Listing 26.1 resize_image.php Resizes a JPEG Image On-the-Fly

<?
if (!$max_width)
  $max_width = 150;
if (!$max_height)
  $max_height = 100;

$size = GetImageSize($image);
$width = $size[0];
$height = $size[1];

$x_ratio = $max_width / $width;
$y_ratio = $max_height / $height;

if ( ($width <= $max_width) && ($height <= $max_height) ) {
  $tn_width = $width;
  $tn_height = $height;
}
else if (($x_ratio * $height) < $max_height) {
  $tn_height = ceil($x_ratio * $height);
  $tn_width = $max_width;
}
else {
  $tn_width = ceil($y_ratio * $width);
  $tn_height = $max_height;
}

$src = ImageCreateFromJpeg($image);
$dst = ImageCreate($tn_width,$tn_height);
ImageCopyResized($dst, $src, 0, 0, 0, 0,
    $tn_width,$tn_height,$width,$height);
header("Content-type: image/jpeg");
ImageJpeg($dst, null, -1);
ImageDestroy($src);
ImageDestroy($dst);
?>

The script takes three parameters—the filename of the image to display, the maximum width, and the maximum height in pixels. It is not to say that if the maximum size specified is 200×200, the image will be scaled to 200×200. Rather, it will be scaled down in proportion so that the larger of the width or height is 200 pixels and the other dimension is 200 pixels or smaller. For instance, a 400×300 image would be reduced to 200×150. This way the proportions of the image will be maintained.

Resizing on-the-fly on the server is a better option than just specifying HEIGHT and WIDTH attributes to the <IMG SRC> tag. The large, high-resolution image that a writer submitted might be several megabytes in size; but when scaled to a reasonable size, it could be under 100k. There is then no need to download the huge file and ask the browser to resize it.

The image manipulation functions are covered in detail in Chapter 19. Here we are using the ImageCopyResized() function to scale the image on-the-fly to the required size.

The key to the resize operation is the calculation of the new width and height parameters. We find the ratio between the actual and maximum dimensions. $max_width and $max_height can be passed in on the query string; otherwise, the default values specified at the top of the listing will be used.

					
$x_ratio = $max_width / $width;
$y_ratio = $max_height / $height;

				

If the image is already smaller than the specified maximum dimensions, the width and height are left unchanged. Otherwise, either the X or Y ratio is then used to scale both dimensions equally so that the reduced size image is not stretched or squashed, as follows:

					
if ( ($width <= $max_width) && ($height <= $max_height) ) {
  $tn_width = $width;
  $tn_height = $height;
}
else if (($x_ratio * $height) < $max_height) {
  $tn_height = ceil($x_ratio * $height);
  $tn_width = $max_width;
}
else {
  $tn_width = ceil($y_ratio * $width); 
  $tn_height = $max_height;
}