By: Brock Ferguson

September 5th, 2004

Reader Rating: 9

Let's suppose that you've just been given five screenshots from the biggest upcoming video game of the year. You want to share your screenshots, but credit has to be given where credit is due -- after all, you haven't been sweet-talking public relations representatives for fun, right?

The solution is to watermark the images. But the standard watermarking procedure of editing the image in a photo-editing application is time consuming. PHP offers a far better solution.

PHP 4+ and GD 2.0+ [1] represent a powerful combination when it comes to creating or altering images dynamically. In this tutorial, we'll look at some of the GD and standard PHP functions as we watermark images on the fly.

The Script

The script, just 13 lines in length, begins with a header() call to tell the Web browser that we are going to output an image in JPEG format. Without this line, a page calling the script via the HTML <img> tag will receive a broken image and, if the script is accessed directly, the user will see the image data as plain text.

Specifying the content type is unnecessary with most PHP scripts because "text/html" is the default content type for PHP scripts.

header('content-type: image/jpeg');

Now that the browser is ready for an image, we can start to calculate the mathematics of the watermark placement and load the images.

The Watermark

A file titled 'watermark.png' (notice use of the PNG format; GD 2.0+ has removed compatibility with GIF images) should be located in the same directory as the script. If not, change the file path in the following function call, which will load the watermark image. The file should be a PNG-8 format file, not PNG-24. There's a bug in the current version of GD, which doesn't support PNG-24 correctly.

$watermark = imagecreatefrompng('watermark.png');

Our operations used later in the script will need to know the exact height and width, in pixels, of this watermark image. These dimensions will be used to place the watermark in a relative position on the image. Let's use imagesx() and imagesy() (not GD functions, but standard PHP functions):

$watermark_width = imagesx($watermark);  
$watermark_height = imagesy($watermark);

The Image

Now, we'll create from the JPEG file an image that we want to have watermarked, and set it as a variable, $image. By using the imagecreatefromjpeg() function, we load the file into the PHP script using the GD library. This gives us the opportunity to manipulate and/or output the image using our script.

$image = imagecreatefromjpeg($_GET['src']);

We'll keep the script simple by using a variable, $_GET['src'], which should have the complete path to the file that needs to be watermarked. Alternatively, you can build the path in the script, which is a bit more secure and private. As long as that function receives the full path as its first parameter, everything will be fine.

Next, we are going to make some dimension calculations on the image being watermarked. These dimension calculations will be completed (for no other reason but to learn about new functions} using the getimagesize() function. The getimagesize() function works by returning an array where key "0" = width and key "1" = height.

The procedure of the next three lines of code are to:

1. grab the dimensions of the image we want watermarked, $image


2. subtract the corresponding dimension from our watermarking image


3. add a 5 pixel margin

Finally, we should be left with the exact pixel (further referenced as the "destination location") at which where our watermarking image ($watermark) should be placed on the image to be watermarked ($image):

$size = getimagesize($_GET['src']);  
$dest_x = $size[0] - $watermark_width - 5;  
$dest_y = $size[1] - $watermark_height - 5;

Merging the Image and the Watermark

Here is the most complex function in the entire script: imagecopymerge(). The official syntax for this function is:

int imagecopymerge ( resource dst_im, resource src_im, int dst_x, int dst_y, int src_x, int src_y, int src_w, int src_h, int pct )

This excerpt from the manual explains this function better than I ever could:

(Source: PHP Manual [2])

In short, the following line of code merges the two images using the destination locations we calculated earlier:

imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);

Our final lines of code will output the image merged with the watermark to the browser using imagejpeg(). They will then use imagedestroy() to clear the RAM of all the images we have loaded with the GD library.

imagejpeg($image);  
imagedestroy($image);  
imagedestroy($watermark);

There you have it! You can now watermark any image on your Web server dynamically using one of the deadliest combinations of free software: PHP and the GD image library. The complete watermarking script is below. Enjoy!

<?php  

header('content-type: image/jpeg');  

$watermark = imagecreatefrompng('watermark.png');  
$watermark_width = imagesx($watermark);  
$watermark_height = imagesy($watermark);  
$image = imagecreatetruecolor($watermark_width, $watermark_height);  
$image = imagecreatefromjpeg($_GET['src']);  
$size = getimagesize($_GET['src']);  
$dest_x = $size[0] - $watermark_width - 5;  
$dest_y = $size[1] - $watermark_height - 5;  
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);  
imagejpeg($image);  
imagedestroy($image);  
imagedestroy($watermark);  

?>

[1] http://www.boutell.com/gd/
[2] http://www.php.net