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!

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. 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 );
    } );
   

5. You can add some callback handler

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

6. You can add the following CSS code in your CSS file for better quality rendering

    canvas, img {
        image-rendering: optimizeQuality;
        image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
                -ms-interpolation-mode: bicubic;
    }
   

7. 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