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.
Simply place the watermark.js right before the body closing tag and call wmark.init
: the class of the elements which should get an mark. (Optionally) Default: "watermark"
: "top-left"|"top-right"|"bottom-right"|"bottom-left". (Optionally) Default: "bottom-right"
: an img element which represents your watermark. (Optionally)
: the path to your watermark image. (Optionally)
: opacity percentage, no "%" only the number [0-100] (Optionally) Default: 50
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