jQuery imageMask
This jQuery plugin will allow you to add simple image-mask to your images.
Include the plugin after the jQuery:
<script type="text/javascript" src="jquery.imageMask.min.js"></script>
The origional image sizing option is under progress. Currently only fitting to the mask image works. SVG support is in the works.
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 );
} );
} );
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;
}
DONE!
You can see a demo over this link.
This project is released over MIT license
AlmogBaku - Almog Baku - http://www.almogbaku.com