Add Image Or Text Watermarks To Images with jQuery - watermark

Just another jQuery plugin for adding customizable image or text watermarks to your images using HTML5 canvas and JavaScript.

Basic usage:

1. To get started, download the plugin, unzip it and load the jquery.watermark.min.js in your html document. Make sure you also add the jQuery JavaScript library.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="dist/jquery.watermark.min.js"></script>

2. Add a text watermark to your image.

$('img.watermark').watermark({
  text: 'GOOGLE.COM',
  textWidth: 100
});

3. Add an image watermark to your image.

$('img.watermark').watermark({
  path: 'path to the watermark image'
});

4. All customization options with default values.

// path to the watermark image
path: 'watermark.png',

// options for text watermark
text: '',
textWidth: 130,
textSize: 13,
textColor: 'white',
textBg: 'rgba(0, 0, 0, 0.4)',

// position of the watermark
// nw | n | ne | w | e | sw | s | se
gravity: 'se', 

// opacity of the watermark
opacity: 0.7,

// distance from watermark to edge of image
margin: 10,

// output options
outputWidth: 'auto',
outputHeight: 'auto',
outputType: 'jpeg', // jpeg | png | webp

// callback events
done: function (imgURL) {
    this.src = imgURL;
},

fail: function ( /*imgURL*/ ) {
    // console.error(imgURL, 'image error!');
},

always: function ( /*imgURL*/ ) {
    // console.log(imgURL, 'image URL!');
}

---

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