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.
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 demotitle>
head>
<body>
<div style="width:95%; text-align:center">
<div style="float:left; width:48%">
<h3>Test Watermark demoh3>
<img src="img/img3.jpg" style="width:100%" class="watermark_text"/>
div>
<div style="float:right; width:48%;">
<h3>Image Watermark demoh3>
<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>
|
Test Watermark demo
![]("img/img3.jpg")
Image Watermark demo
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 demotitle>
head>
<body>
<div style="width:95%; text-align:center">
<div style="float:left; width:48%">
<h3>Test Watermark demoh3>
<img src="img/img3.jpg" style="width:100%" class="watermark_text"/>
div>
<div style="float:right; width:48%;">
<h3>Image Watermark demoh3>
<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>
|
Test Watermark demo
Image Watermark demo
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