PHP Watermark Script
Original Image - No Watermark
The level of theft of images on the Internet behooves website designers to consider adding watermarks to their best images. It's easy enough to create 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 to manipulate your original image on the fly by drawing your desired text over them or overlaying another image 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.
[Watermark Using GD] [Watermark Using ImageMagick] [Watermark Using JavaScript] [Automatic Watermarks]
PHP Image Watermark Using GD Library
Example Text Message Watermark Using PHP & GD
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 watermark creator 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.
Example Image Logo Watermark Using PHP & GD
Of course, with a complete graphics toolbox library at our fingertips, we aren't limited to simply drawing text. We can also overlay our logo graphic onto our images to create an attractive watermark. This is done using the PHP function "imagecopymerge" which not only handles the combining of the two images, it also has an opacity setting so that the logo can be translucent and allow details of the original image to be visible. You can also control the size of the watermarking image. This example uses the same graphic that appears at the top of this page, reduced to half it's normal size. And, as you can see, the watermark image can be rotated to make it more attractive, or simply less obtrusive. These options can be set on each individual image through the query string options used when calling the script. Try my PHP Watermark Example page to see how many of the possible options on this script work.
Example Full Watermark Using PHP & GD
There is a button at the bottom of this page where you can Download This Script with the documentation .
PHP Image Watermark Using ImageMagick
Examples of 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 sends command line calls to ImageMagick, so it works without requiring the ImageMagick PHP interfaces like IMagick or MagickWand. It supports all of the commands from the GD Library version above, so you can control the watermark effects for each image that you use in the same way. The ImageMagick version adds some additional positioning options for center positions at the top, in the middle, or at the bottom of the image.
I've recently added automatic watermark font color support to the ImageMagick version. As demonstrated in the examples to the left, when you set the font color to "auto", the script samples the image where the watermark will be drawn, and then automatically selects either a light or dark contrasting font color. See how in the top example where the watermark is drawn over a light-colored area of the sky, the script chooses a dark color for the text. But in the bottom example where the text is drawn in a dark shadow, the script uses a light color. This feature does add significant processing time, so use it with consideration for your users. That is, avoid having dozens of watermarked images on the page when using "auto" mode. In addition, note that this function requires v6.x of ImageMagick or higher.
There is a button at the bottom of this page where you can Download This Code with the documentation .
Automatic Image Watermark with .htaccess
While having these scripts available is handy, unless you take some additional steps, you have to use a direct call to the watermarking script in every img tag on your pages, which scrapers and hotlinks can easily decipher and extract the direct URL for the original image file. So I suggest that you put all of the image files that you want to protect into a special directory on your site. This allows you to intercept HTTP requests for these files and reroute them through the watermark creator script you select - automatically and invisibly using an .htaccess file. The following instructions should do the trick:
RewriteCond %{REQUEST_URI} ^/protected/(.*)([gif|jpe?g|png|bmp])$
RewriteRule ^(.*) /wm.php?src=$1 [L]
Just replace "protected" with the name of the directory where your website's image files are located, and install wm.php in the root directory for your website.
You can add additional parameters to the query string in the last line of the above code, but it's simpler to just change the default settings in the script files. With this instruction in place, you can use the direct URLs in your img tags and the watermark will be added automatically.
Watermarks Using JavaScript with CSS
True watermarking in Javascript is actually impossible, since JavaScript lacks the capability of creating or manipulating images the way PHP or Perl scripts can. What we can do is to use it to create a watermark overlay with HTML and CSS using the z-index function, the same way I did for captions in my slideshow script.
The obvious drawback to the JavaScript method is that it only works on the pages on
your site where the code has been installed. If another website hotlinks to your images, the watermark will not appear. The
only benefit is that the images will appear to be watermarked, and that might discourage hotlinking or copying.
The script works by scanning your HTML document at onLoad() time to detect all DIVs with a class attribute set to "wmBox". That's why this method includes two example images. The JavaScript script then automatically adds our watermark text in an appropriate location on each image in a DIV that overlays the image in a higher z-index layer. Just be sure to include the CSS settings file "watermark.css", or copy the contents into your own stylesheet.
As it exists, the script will only display text. But it's capable of using an image as a
watermark as well. With some modification to the stylesheet, you could add transparency or other visual effects. You
can download the script with documentation by pressing the "Download" button below.
The Rainbo Design Image Watermark Creator Scripts package is provided free of charge. If you use and appreciate it, please
post the following link in an appropriate location on your site:
a href="http://www.rainbodesign.com/pub/" Rainbo Design Tools & Scripts/a
This page was last modified on August 27, 2020
