Creating Thumbnail Images - Page 17

The GD library provides the copyResized() function, which allows us to cut a portion of an image (or the entire image) into another image. What makes this function different than other copy commands, however, is the ability to specify a width and height that are different than the original size. The syntax for the command is as follows:

	$image->copyResized($sourceImage,$dstX,$dstY,
	 $srcX,$srcY,$destW,$destH,$srcW,$srcH)

[The lines above are one line. They have been split for formatting purposes.]

The first parameter is a reference to a GD object that contains the original image that we will be copying from. The second and third parameters define the x and y coordinates of the position in the new image where the original image will be placed (since we can copy an image into a new file or paste it into an existing image). The fourth and fifth parameters specify the x and y coordinates of the starting position in the original image that we will be copying from (since we can copy portions of the image, including the whole thing). The sixth and seventh parameters specify the width and height that the original image will fit into. If this width and height are different than the original size, GD will automatically stretch or shrink the image to fit. The eighth and ninth parameters specify the width and height of the original image that we want to copy. This is the width and height of the original image slice from the starting x and y coordinates specified in the fourth and fifth parameters. If you want to copy the entire image, make sure that the starting x and y coordinates for the source image are both 0. To get the width and height of the original image, use the getBounds() function, which returns the width and height of the image. The example below utilizes the copyResized() and getBounds() to create a thumbnail based on our last image that fits within a 100x100 pixel block.

1  use GD;
2  my $maxheight = 100;
3  my $maxwidth = 100;
4  my $srcimage = GD::Image->newFromJpeg("text2.jpg");
5  my ($srcW,$srcH) = $srcimage->getBounds();
6  my $wdiff = $srcW - $maxwidth;
7  my $hdiff = $srcH - $maxheight;
8  my $newH; my $newW;
9
10  if ($wdiff > $hdiff) {
11      $newW = $maxwidth;
12      $aspect = ($newW/$srcW);
13      $newH = int($srcH * $aspect);
14  } else {
15      $newH = $maxheight;
16      $aspect = ($newH/$srcH);
17      $newW = int($srcW * $aspect);
18  }
19
20  print "converting $srcW:$srcH to $newW:$newH\n";
21
22  my $newimage = new GD::Image($newW,$newH);
23  $newimage->copyResized($srcimage,0,0,0,0,$newW,$newH,$srcW,$srcH);
24  open(FILE, ">index1.jpg") || die "Cannot open text2.jpg: $!\n";
25  print FILE $newimage->jpeg;

Lines 2 and 3 set the maximum image width and height for the thumbnail image. Line 4 opens our 'Eat More Chiken' JPEG image. Line 5 retrieves the width and height of the original image. Line 6 calculates the difference of the original and maximum thumbnail width and height. This information is used on line 10 to determine which difference is greater (width or height). We want to use the dimension that has the greatest difference to calculate the new width and height of the thumbnail image. The reason we do not just resize the image to 100x100 is because it will distort the image to a different aspect ratio than the original, which will cause an unnatural looking vertical or horizontal stretching effect. It is better to maintain the original aspect ratio while making sure the new image fits within the boundaries that we have specified.

Therefore, if the width has the greatest difference (which it does in our cow image), then we set the new width to $maxwidth on line 11. To calculate the new height for the image, we must also determine the new height that corresponds and maintains the original aspect ratio of the image. We do this by calculating the percent of the width that was used in the thumbnail based on the original width, whose result is assigned to the $aspect variable on line 12. Then we calculate the new height of the image by multiplying the original height by the $aspect variable. On line 22, we create a new GD image using the new width and height that was just calculated. We then call the copyResized() function on line 23, which will resize a copy of the original image based upon the new width and height. Lastly, we open a new file handle and save the image to index1.jpg in JPEG format on lines 24 and 25. On line 25, we could have alternatively called $newimage->jpeg, which would have saved the image in PNG format instead of JPEG format.

Summary

In this article, we have covered several graphic manipulation fundamentals including drawing borders, changing background colors, setting a transparent color, drawing text, and creating thumb-nails. In the next article in this series, we will learn more image manipulation techniques, so stay tuned.

Adding Text to Images - Page 16
Weaving Magic With Regular Expressions
Automating Image Manipulation with GD - Page 18