Dynamic Copyright Watermark

The only effective way to discourage theft of images from your web site is to place a copyright notice within the images themselves. There are two ways to do this. The first way is to edit all of your images to embed a copyright notice in them before you upload them to your site. This method has the advantage that the only versions of the images on your site are the ones with the copyright notice embedded in them and so the only way for someone to get a copy of the image without the copyright notice is for them to manually edit the image in their own graphics editor to attempt to remove the copyright notice. This method has the disadvantages of having to keep two copies of the image (one with and one without the notice) and every time you change the image you need to reapply the copyright notice.

The alternative way is to dynamically add the copyright notice to the images when they are viewed. This has the advantage of only needing one copy of the images but has the disadvantage that processing is required to add the copyright notice each time the image is displayed plus the fact that the images without the copyright need to be on your site where there is at least the possibility that someone may find a way to access them directly. These disadvantages can be overcome by storing the original images in a password protected folder or above the root folder of your site and by setting up a caching system so that a copy of the images with the copyright notice added are available for direct use with the script to add the copyright only needing to be run once for each image.

Let's keep things simple for the mment though and look just at what is required to actually add a copyright notice into the images on your site dynamically. You can always modify the script later to add the extra functionality.

watermark imageThe first thing we will need in order to add our copyright notice into our images is an image containing the copyright notice itself that we will use to watermark the images. We'll make this a PNG image so that we can make the background transparent so as to allow the main image to show through. For the purpose of demonstrating this I have created a watermark.png file that is 150 pixels wide by 100 pixels high and wrote my copyright notice into it first in white text and then again in black text overlapping the white text. This colouir contrast will help to make the copyright notice visible regardless of the colour in the images we use it in as well as giving the copyright notice a more three dimensional appearance.

The next thing we'll need is a PHP script that will take this watermark.png file along with the image we want to apply it to which will then generate the combined image for display on our web page. Here is the basic code to do this which will handle all three of the web graphics formats (provided you have an appropriate version of the GD2 library installed on your hosting).

$img = $_GET['src'];
$imgp = explode('.',$img);
switch($imgp[1]) {
case 'jpg': header('content-type: image/jpeg'); break;
case 'gif': header('content-type: image/gif'); break;
case 'png': header('content-type: image/png'); break;
$watermark = imagecreatefrompng('watermark.png');
list($watermark_width,$watermark_height) = getimagesize('watermark.png');
switch($imgp[1]) {
case 'jpg': $image = imagecreatefromjpeg($img); break;
case 'gif': $image = imagecreatefromgif($img); break;
case 'png': $image = imagecreatefrompng($img); break;
$size = getimagesize($img);
$dest_x = ($size[0] - $watermark_width) / 2;
$dest_y = ($size[1] - $watermark_height) / 2;
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0,
        $watermark_width, $watermark_height, 25);
switch($imgp[1]) {
case 'jpg': imagejpeg($image); break;
case 'gif': imagegif($image); break;
case 'png': imagepng($image); break;

Simply save all the PHP in a file called watermark.php in the same folder as your images (or modify the $img assignment in the first line of the script to add a path to the front of the $_GET field so as to allow it to be put in a different folder).

Image without Copyright Notice.Image with Copyright Notice. Now all that remains to be done is to make a minor change to the way you reference your images in the image tags in your web page. Where we have an image such as the one shown on the left that has src="thirlmer1.jpg" coded in the img tag we simply modify that to read src="watermark.php?src=thirlmer1.jpg" in order to dynamically add the copyright notice into the image (as shown on the right).

Note that if this script doesn't function correctly either by not displaying the image at all or by having the background colour of the watermark show through rather than being treated as transparent then the GD2 library is either not installed on your hosting or is an outdated version.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow