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>

Usage

Using imageMask is simple!

1. Create image element

   <img src="image.jpg" class="mySelector" />
   

2. Create mask image(black will keep stay, and the transparent will cutted of)
   

3. Add imageMask query to the ready event. use function .imageMask(path_to_mask)

   $( document ).ready( function() {
       $( ".mySelector" ).imageMask( "mask.png" );
   } );
   

4. You can add some callback handler

   $( document ).ready( function() {
       $( ".mySelector" ).imageMask( "mask.png", function( $canvas ) {
           console.log( 'Do something here!', $canvas );
       } );
   } );
   

5. DONE!

Demo