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