JavaScript Watermark in HTML 5
Original Image - No Watermark
Watermarking images with JavaScript seems to be a much sought-after solution to the problem of image theft, so I thought I'd go beyond the overlay method I described before and explore the possibilities of watermarking images in HTML 5 using Scaled Vector Graphics (SVG) and the <svg> element.
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.
Converting a JPG, PNG or GIF Image to SVG
The SVG file format allows for including bit-mapped images in formats like JPG, PNG, or GIF,
so we can manipulate them easily enough within the <canvas> tag using JavaScript.
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.
There is a button at the bottom of this page where you can Download This Code with the documentation .
This page was last modified on August 27, 2020
