[jQuery - ImgMask] (https://github.com/desta88/jQueryImgMask)

jQuery Plugin for masking image using canvas (Support for multiple images)

This is a jQuery plugin for add your image / pattern masking to your images.

Installation

1. Download plugin jquery.imgMask.min.js

2. Add the plugin after jQuery library

   <script type="text/javascript" src="jquery.imgMask.min.js"></script> 

Usage

1. Create element for plugin like this, (NOTE : Until this version the selector attribute just using ID not Class)

   <div id="myCanvas"></div> 

2. Initialize plugin

   $(document).ready(function(){ 	$('#myCanvas').imgMask({ 		type: 'image',	//Type has attribute image or pattern 		objMask: 'assets/images/mask.jpg',	//It would be base masking object 		source: 'assets/images/source1.png',	//Source file into mask, NOTE: it must be transparent 		width: 100, 	//Canvas width 		height: 100 	//Canvas height 	}); }); 

3. Call method drawImage for multiple images

   $(document).ready(function(){ 	var param = $('#myCanvas2').imgMask({ 			type: 'image', 		objMask: 'assets/images/mask.jpg', 		source: 'assets/images/source3.png', 		width: 100, 		height: 100 	}); 	param.call_drawImage('image', 'myCanvas2', 'assets/images/source1.png', 100, 100); }); 

Demo

Full demo example here

License

License : MIT License

Authors

Official Authors @desta