jQuery imageMask
This jQuery plugin will allow you to add simple image-mask to your images.
Installation
Include the plugin after the jQuery:
<script type="text/javascript" src="jquery.imageMask.min.js"></script>
Note
The origional image sizing option is under progress. Currently only fitting to the mask image works. SVG support is in the works.
Usage
Using imageMask is simple!
-
Create image element
<img src="image.jpg" class="mySelector" />
Create mask image(black will keep stay, and the transparent will cutted of)
-
Add imageMask query to the ready event. use function
.imageMask(path_to_mask)
$( document ).ready( function() { $( ".mySelector" ).imageMask( "mask.png" ); } );
-
Choose if you want to match the size of the origional images or the mask image. Pass
null
in callback perameter to skip callback.$( document ).ready( function() { $( ".mySelector" ).imageMask( "mask.png", null ); } );
-
You can add some callback handler
$( document ).ready( function() { $( ".mySelector" ).imageMask( "mask.png", function( $canvas ) { console.log( 'Do something here!', $canvas ); } ); } );
DONE!
Demo
You can see a demo over this link.
License
This project is released over MIT license
Authors
AlmogBaku - Almog Baku - http://www.almogbaku.com