Add text and image watermark on image using jquery

by Posted on

This is a very quick tutorial about adding text and image watermark using jquery, If you have some very important images and you are afraid to publish images on the web because of stealing. And you don’t have much time to add watermark on all your images one by one through photoshop. For that case you can use jquery watermark library to add your company logo or name on image instantly.


Baivong has created a wonderful jquery watermark library to add your watermark on image very easily. In this tutorial i am going to use that library.
watermark

Create your view file index.html and include required jquery libraries.

This jquery watermark api dependent on jquery core library so first include jquery core library and after that include jquery watermark library.

index.html

 
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
 <title>Add Text and Image watermark using jquery demo</title>
</head>
 
<body>
<div style="width:95%; text-align:center">
<div style="float:left; width:48%">
<h3>Test Watermark demo</h3>
<img src="img/img3.jpg" style="width:100%" class="watermark_text"/>
</div>
<div style="float:right; width:48%;">
<h3>Image Watermark demo</h3>
<img src="img/img3.jpg" style="width:100%" class="watermark_img"/>
</div>
</div>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/jquery.watermark.min.js"></script>
</body>
</html>

In the above code snippet i called two images, On first image i’ll add text watermark and On second one i’ll add image watermark.

Code to add text watermark

//add text water mark;  
 $('img.watermark_text').watermark({
  text: 'IAMROHIT.IN',
  textWidth: 100,
  textColor: 'white'
 });

where watermark_text is the class i assigned to first image

Code to add image watermark

//add image water mark
 $('img.watermark_img').watermark({
  path: 'logo.png'
 });

where watermark_img is the class i assigned to second image.


Your complete index.html file will be.

index.html

 
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
 <title>Add Text and Image watermark using jquery demo</title>
</head>
 
<body>
<div style="width:95%; text-align:center">
<div style="float:left; width:48%">
<h3>Test Watermark demo</h3>
<img src="img/img3.jpg" style="width:100%" class="watermark_text"/>
</div>
<div style="float:right; width:48%;">
<h3>Image Watermark demo</h3>
<img src="img/img3.jpg" style="width:100%" class="watermark_img"/>
</div>
</div>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/jquery.watermark.min.js"></script>
<script>// path to the watermark image
$(function(){
 //add text water mark; 
 $('img.watermark_text').watermark({
  text: 'IAMROHIT.IN',
  textWidth: 100,
  textColor: 'white'
 });
 //add image water mark
 $('img.watermark_img').watermark({
  path: 'logo.png'
 });    
})
 
</script>
</body>
</html>

HERE are the list of options you can use to customize the plugins.

Name Type Default Description
path String ‘watermark.png’ Path contains images used as a watermark, can use base64 image.
text String ” Text used as a watermark.
textWidth Number 130 Text width of frame surrounds, units: px.
textSize Number 12 Font size of text, units: px.
textColor String ‘white’ Text color, you can use HEX or RGBA color codes.
textBg String ‘rgba(0, 0, 0, 0.4)’ Background color, you can use HEX or RGBA color codes.
gravity String ‘se’ The position of the watermark on the image (nw, n, ne, w, e, sw, s, se).
opacity Number 0.7 The transparency of watermark, the value between 0 and 1.
margin Number 10 Distance from watermark to edge of image.
outputWidth Number ‘auto’ Image width after adding watermark, units: px or use ‘auto’.
outputHeight Number ‘auto’ Image height after adding watermark, units: px or use ‘auto’.
outputType String ‘jpeg’ Image format after adding watermark, You can use one of three types (jpeg, png, webp).
done Function function(imgURL){this.src=imgURL;} Called after image with watermark is created.
fail Function function(){} Called after an error of images is occurring.
always Function function(){} Called when processing finishes (done and fail).

You can customize your watermark by adding more option in watermark function, go to official github plugin page and see all options.
https://github.com/baivong/watermark

DEMO

DOWNLOAD

If you like this post please don’t forget to subscribe my public note book for more useful stuff

Published by admin