jQuery Plugin To Create Customizable Image Watermark - watermarker

File Size: 584 KB
Views Total: 9420
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Customizable Image Watermark - watermarker

watermarker is a small jQuery plugin that generates a customizable and draggable watermark on your images.

How to use it:

1. Include jQuery javscript library on your web page directly from a CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Include the jQuery watermarker javascript and CSS files in the page, after jQuery library.

<link rel="stylesheet" href="watermarker.css" type="text/css">
<script src="watermarker.js" type="text/javascript"></script>

3. Insert your image in an DIV container with a CSS class.

<div class= "image" style="width:800; height:600;" >
<img src="images/picture.jpg" id="image" style="width:100%;height:100%;" >
</div>

4. Call the plugin on the container.

<script type="text/javascript">
$(function() {
$('.image').watermarker();
});
</script>

5. Customize your image watermark.

<script type="text/javascript">
$(function() {
$('.image').watermarker({
onChange: function(){},
onInitialize: function(){},
imagePath: "images/watermark.png",
containerClass: "watermarker-wrapper",
watermarkerClass: "watermarker-container",
watermarkImageClass: "watermarker-image",
resizerClass: "resizer",
draggingClass: "dragging",
resizingClass: "resizing",
offsetLeft: 0,
offsetTop: 0,
aspectRatio: undefined,
});
});
</script>

Change logs:

2016-01-11

  • add onChange on resize event

2015-03-06

  • bugfix

2015-02-26

  • bugfix

2014-12-30

  • fix para calcular la opacidad

2014-12-24

  • bugfix

2014-12-22

  • add destroy and remove methods

2014-12-17

  • add an ablitly to send more than one item to watermarker

This awesome jQuery plugin is developed by NicoDerecho. For more Advanced Usages, please check the demo page or visit the official website.