JavaScript & PHP‎ > ‎

6x9 Watermark

About

A PHP script to add a watermark image to normal images (to identify the image's source) while keeping the location of the originals hidden, and without the need to manually "Photoshop" the images to add the watermarks.

Example

NOTE: The example is non-functional; once I spend more time with Google Sites I'll hopefully get all the JavaScript working. At the moment my primary goal is availability of the scripts. However the images are saved copies of the images generated for the example before I moved to Google Sites, so it's close enough.

Original Image

Watermark Added

Invalid Image

Invalid Watermark

Using

Initial Setup

Once you have uploaded the script to the server, there are a couple of things to do before you use it.

Firstly create the watermark image. This can be done in your graphics package of choice, but the file must be a PNG. For example, this is the image used in the Example section:

Secondly, edit the "Setup" section near the top of 6x9watermark.php:

  • $padding is the number of pixels between the watermark and the outside of the image.
  • $watermark is the path to watermark image, relative to the root directory. It must include the leading slash.
  • $path is the path to 6x9watermark.php itself, relative to the root directory. It must include the leading and trailing slashes but must not include the actual filename.

After that you should be all set.

Implementation

Once you've uploaded and set up the script, add:

<?php include '6x9watermark.php'; ?>

to the top of all pages where you want to use it. Obviously the pages must have a ".php" extension and the path in the "include" must match the actual location of the script.

Then, instead of this:

<img src="/path/to/image.jpg" alt="An Image" />

do this:

<img src="<?php echo watermark("/path/to/image.jpg"); ?>" alt="An Image" />

The path in the function must either be a full URL (http:// etc.) or the path to the image relative to the root directory of the website.

Invalid Images

If the image or the watermark are not valid, then the image returned will be an image informing you of this fact, as in the Example section above.

How It Works

The script uses the data: URI scheme to output the images, except in Internet Explorer (which didn't support it when I made the script) where a less elegant solution must be employed.

The image and the watermark are loaded and combined using PHP functions. Then, because of how PHP works, the combined image has to be stored to a temporary file and then read back. It is then appropriately encoded for "data:" and the finished URI is returned.

Technical explanation: The images are Resources, but the encoding requires a String. Going via a temporary file seemed to be the simplest way of converting it.

Feedback

I'd like to hear what you have to say about this or any other project on the site.

If you have any comments, compliments, or suggestions feel free to get in touch and let me know.

Download

Download the latest version using the link below.

Note that the first version uploaded here was last updated 2008-03-13. The date of any subsequent changes will be accurately reflected in the date shown in the table.

SelectionFile type iconFile nameDescriptionSizeRevisionTimeUser
ċ

Download
A PHP script to add a watermark image to normal images (to identify the image's source) while keeping the location of the originals hidden, and without the need to manually "Photoshop" the images to add the watermarks.  4k v. 4 23 Mar 2013, 21:36 Richard Winskill
Comments