What is watermark.js?

watermark.js is a js library for creating watermarks on images written by Patrick Wied. Images with a classname of your choice (default "watermark") will get processed and then apply your watermark. Your watermark doesn't have to be a .PNG or .GIF with transparency, watermark.js creates transparency even if you defined a .JPG as your watermark picture. watermark.js is open source, feel free to fork on github, contributions are very welcome.
I wrote an article about transparency in images with HTMLcanvas, watermarkjs is based on this concept. If you're a jQuery lover, check out the watermark.js jQuery plugin


The purpose of watermark.js is to protect images, served from your website from copying without a mark. It's not a real image protection, because if you get the document at the initial state you'll be able to read the srces but a normal user wont get it ;) watermark.js is not limited to "image-protection" only, but you could also place a little identifier or a picture of you in your images


I've built some demos to show how it works.
-  Basic Demo: applying a watermark to several images
-  Special demo: applying a qr code as watermark to several images
watermark.js is currently supported in Firefox 3.6+, Chrome, Opera 11, IE9 and works on iPad.
If it's not supported it doesn't apply the watermarks.

How to

Simply place the watermark.js right before the body closing tag and call wmark.init method. The init method gets an javascript object passed. Here are the configuration values for customization(right now):

"className": the class of the elements which should get an mark. (Optionally) Default: "watermark"
"position": "top-left"|"top-right"|"bottom-right"|"bottom-left". (Optionally) Default: "bottom-right"
"watermark": an img element which represents your watermark. (Optionally)
"path": the path to your watermark image. (Optionally)
"opacity": opacity percentage, no "%" only the number [0-100] (Optionally) Default: 50

Important note: You have to define either watermark or watermarkPath in order to make it work!


If you have any questions about the project, don't hesitate to contact me:
Patrick Wied | @patrickwied