Image manipulation with PHP & the GD library, Part 2
(Page 1 out of 3)Abstract
In this second part of the "Image manipulation with PHP & the GD library" article series you will learn how to resize images, create thumbnails, watermark images and more.
Introduction
Welcome to the second part of the "Image manipulation with PHP & the GD library" article series, and in this part we'll take a look at how to resize images, create thumbnails, watermark images and more using PHP's image functions.
If you haven't read the first part, I recommend you do so before reading this part, because I will talk about several things we've done in the previous part.
Let's get started with resizing images and creating thumbnails.
Resizing images
The first step in resizing images is to get the original height and width of the image. PHP comes with three functions for this: getimagesize(), imagesx() and imagesy(). The first function doesn't require the GD library, and the latter two do.
We won't be using the getimagesize() function, since we're already using the GD library, which means it makes more sense to use the other two functions. The example below demonstrates the functions:
// Load image
$image = open_image('flower.jpg');
if ($image === false) { die ('Unable to open image'); }
echo 'Height: ' . imagesy($image) . ' pixels';
echo 'Width: ' . imagesx($image) . ' pixels';
?>
As you can see it's fairly straight-forward, and easy to use. All you need to do is pass the image resource as the first argument, and it will return the height or width. Note that the open_image() function is the same open_image() function we created in the previous part.
Now that we have the height and width of the image we can resize it, and make it bigger or smaller. PHP comes with two functions to do this: imagecopyresize() and imagecopyresampled(). The first function simply resizes the image, whilst the second function will resize but also resample the image. This means that the second function will create a resized image that looks much better.
The example below demonstrates the use of the imagecopyresampled() function:
// Load image
$image = open_image('flower.jpg');
if ($image === false) { die ('Unable to open image'); }
// Get original width and height
$width = imagesx($image);
$height = imagesy($image);
// New width and height
$new_width = 150;
$new_height = 100;
// Resample
$image_resized = imagecreatetruecolor($new_width, $new_height);
imagecopyresampled($image_resized, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
// Display resized image
header('Content-type: image/jpeg');
imagejpeg($image_resized);
die();
?>
In the example above we first get the original width and height of the image, just like we did in the previous example. We then make up a new width and height, and in this example we used fixed values (150, 100), but in a minute we'll see how to calculate it dynamically. The next thing we do is create a new image using the imagecreatetruecolor() function, which we'll learn more about later on, but in the example it's the container for the resized image. Finally we use the imagecopyresampled() function, and display the resized image.
In this case we created a thumbnail, because the original image was 300x200 pixels, and it's now 150x100 pixels.
The best way to resize images it to use a fixed percentage to ensure that the ratio between the width and the length stays the same. The below example demonstrates this:
$percent = 0.75;
$new_width = $width * $percent;
$new_height = $height * $percent;
In the example we now calculate the new width and height using a percentage, instead of having fixed values. In this case our resized image would be resized to 75% of the original image (0.75=75%).
It's also possible to specify a new width, and then have the new height automatically calculated or vice versa. See the example below:
$new_width = 200;
$new_height = $height * ($new_width/$width);
// Or, vice versa
$new_height = 300;
$new_width = $width * ($new_height/$height);
As you can see, we use some basic high-school math to calculate the new height or width.
Now that we know how to resize images, let's create a simple script which can be used to upload an image and have it resized.
August 19th, 2006 at 12:55 pm
Hi
i want to resample an image to half its original size but there are not properly done
using the following code so please help me for solving the code :
0) {
$row = mysql_fetch_array ($result);
$percent = 0.5; //ex
$image_type = $row[”image_type”];
$image = $row[”image”];
$image_name = $row[”image_name”];
header(’Content-type: $image_type’);
// Get new dimensions
$width = imagesx($image);
$height = imagesx($image);
$new_width = $width * $percent;
$new_height = $height * $percent;
// Resample
$image_p = imagecreatetruecolor($new_width,$new_height);
$imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
// Output
header(’Content-type: image/jpeg’);
imagejpeg($image_p);
Regards ,
vish
}
?>
August 23rd, 2006 at 9:51 am
Hi vish,
while watching your code I found header(’Content-type: $image_type’); and header(’Content-type: image/jpeg’);.
You can only send one header at once, not two. Just use the last one to make sure everything gets done before you put the resized image on screen.
Then, if you need to resize gif and png you need another header, so implement a switch case i.e. to get the type and use the right functions for these types.
best regards,
Harald Doderer
Director Emedian Ltd.
www.emedian.net
August 24th, 2006 at 11:42 am
short and useful tutorial
August 28th, 2006 at 9:41 am
Thank you so much for this tutorial. This is exactly what I was looking for :) Thank you!
August 29th, 2006 at 4:58 pm
it help me to solve my problem so thanyou very much.