More Scripts
Watermarking Images using PHP, GD,
ImageMagick and JavaScript
The level of theft of images on the Internet behooves webmasters to consider adding watermarks to their best images. It's easy enough to add a watermark using even the simplest graphics editing programs on PCs and Macs, but automated solutions are simpler and, obviously, more flexible as they don't require the webmaster to edit each new image they add to their websites as a part of the design process. Even a batch watermarking tool takes extra effort on your part. The free scripts presented here rely on PHP or Perl to manipulate your original image by drawing text over them that displays your custom watermark. Each script here presents a slightly different method so that you'll have a watermarking method available no matter what hosting environment you have for your website. The scripts do not modify the original image files. All you have to do to watermark your images is to point your <img> tags at one of these scripts instead of directly at the image files. The script then creates a composite image that includes your custom message for display on your webpage.
We start with our original image shown here. There's nothing remarkable about this particular image,
but let's assume that we'd rather not have other websites use this image
without our permission. We can use some hotlinking prevention methods, but watermarking
it means that if anyone else uses the image, they'll either have to crop out our watermark
or advertise our ownership of it. The example scripts presented here all add a copyright symbol
and additional text as a watermark, but you can change them to show whatever you like.
PHP Image Watermark Using GD Library
Most hosting services offer PHP programming support, including the GD
graphics packages, so we'll start there. The package you can download using the button
below includes the PHP script "wm.php". All it takes is replacing the "src"
parameter in the <img> tag with the URL for the PHP script, including the parameters
"src" which contains the path to the original image file, and "color" to
select the color for the font. The script also supports a "size" parameter to
specify the font size, and "pos" to specify displaying the watermark at the "top"
or "bottom" of the image. Using that script to display
the same image with the watermark setting the "src" attribute to
"wm.php?src=images/slide1.jpg&color=white&pos=top&size=9", we get
the resulting image shown on the right.
PHP Image Watermark Using ImageMagick
When it's available, ImageMagick provides a host of powerful tools to manipulate images. Here we're simply using it to annotate the image with our watermark. The PHP code I use makes direct calls on the ImageMagick commands, so it does not require the ImageMagick interfaces like IMagick or MagickWand. It supports the same commands as the GD Library version so you can control the output for each image that you use.
At the moment, ImageMagick isn't working on this site so I can't really demonstrate it here. I apologize for the blank image here, but the code works fine on my computer. I hope to have it working here soon. For now, trust me.
Watermarking in JavaScript with CSS
Watermarking in Javascript is a misnomer, since JavaScript lacks the capability of
creating or manipulating images the way PHP or Perl can. What we can do is to use it to create a watermark
via HTML and CSS using the z-index function, the same way I did for captions in my
slideshow script.
The script works by scanning your HTML document at onLoad() time to detect all
<DIV>s with an ID attribute set to match our identification system of "wmBox1",
"wmBox2", "wmBox3", etc. That's why this method includes two example images. The
JavaScript script then adds our watermark text in an appropriate location.
The Image Watermark Scripts package is provided at no
charge. All I ask is that
if you use this software, please place the following link on your site:
<a href="http://www.rainbodesign.com/pub/">Rainbo Design's Scripts and Tools for Webmasters</a>
Click here to return to the Rainbo Design Scripts and Tools menu.
This page Copyright (C) 2003-2009 by Richard L. Trethewey. All rights reserved.
