Canvas Based Image Masking Plugin with jQuery - ImgMask

ImgMask is a jQuery image masking / overlapping plugin that replaces part of an image with a transparent image / pattern based on Html5 canvas technique.

Basic usage:

1. Load the latest version of jQuery library and the jQuery ImgMask plugin in the html document.

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

2. Create an empty container element with an unique ID.

<div id="example"></div>

3. Call the function on the container element and specify the path to your image and mask files.

$('#example').imgMask({
  objMask: 'mask.jpg', 
  source: 'source.png'
});

4. Plugin's default settings.

$('#example').imgMask({

  // image or pattern
  type: 'image',

  // base masking object
  objMask: null,

  // source file into mask
  source: null,

  // canvas width
  width: null,

  // canvas height
  height: null
  
});

---

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