How to Add Watermark to Images/Photos Using jQuery

Learn how to save your Images from getting copied or linked by adding Watermark to your Images Automatically using jQuery.

Watermark on Photos has become really important nowadays to protect them from fraudsters of getting complete access to the photos and linking them to their own website without authorized permission.

This is a serious copyright issue, but not much people sue website owners and protect their intellectual property as getting legal is costly as well as time consuming.

Although there are many premium tools and solutions that can provide you with the facility but with a penny to be spent.

Usually professional graphics designer and photographers have legal copyrights on their art piece but not all, so what for those who can’t afford copyright bill and charges.

Check out Other Cool Tutorials ?

There is a solution that is used by photographers worldwide is to Watermark their Photos. Switching from older trend to newer, digital watermarks like text, logos etc. on photos are now ruling the sector and are used widely as a solution to protect photos online.

How to Add Watermark to Images?

There are many tools to add watermarks but here you’ll find a very different approach and solution to add watermarks using jQuery codes.

jQuery has many advance libraries and now we are going to learn about one of the libraries “i.e.” jQuery Watermark Library.

This library is created by Baivong and it is available as an open source project on GitHub.

Let’s have a look on the code:

HTML Code:

jQuery Library:

jQuery Code to Add Text Watermark to Photos:

Know about the Code:

The ‘text‘ parameter has to be filled up with the text to be watermarked.

The ‘textWidth‘ parameter needs the total width of the text to be included as watermark.

The ‘textBg: violet‘ parameter is the Background color of the text.

The ‘textColor: black‘ parameter is the color of the text.

The ‘gravity: n‘ parameter is the position of the text, in this case it is North ‘n’. You can also place your text by using various keywords like: Northwest ‘nw’, South ‘s’, West ‘w’, East ‘e’ and related further.

Below is the screenshot to show the effect achieved using jQuery plugin Watermark.

text watermark

jQuery Code to Add Image Watermark to Photos:

Below is the screenshot to show the watermark effect using jQuery plugin Watermark.

watermark to photos

Complete Code:

Now if you want the complete Code for your execution then you can either combine all the above or you can just take the review of below code. The below code is complete and you can have a look.

This is how you can make your own FREE script that will watermark your photos and will protect all your photos from illegal use and give a punch to all those who are using them illegally without the appropriate permission from the Author / designer.

(Visited 598 times, 3 visits today)
Share is Caring...!
This entry was posted in Web Design and tagged , , . Bookmark the permalink.
Amazon and the Amazon logo are trademarks of, Inc. or its affiliates. is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for website owners to earn advertising fees by advertising and linking to Amazon(.com,, .ca etc) and any other website that may be affiliated with Amazon Service LLC Associates Program.

Leave a Reply