jQuery maskImage plugin
I had a need today to write some code which involved masking one image with another, dynamically.
There is no simple way to do this in JavaScript. The nearest I came to finding working code online that does it was edge.js, but that’s not free.
So, I wrote my own.
Download: zip (25k), bz2 (24k)
In the demo, what’s happening is that an image such as this:
is being used as a mask for another image:
to create a masked image:
For Firefox and Chrome and other recent browsers, it works using pure JavaScript (even works on the iPhone).
For Internet Explorer (sigh) you need to do a little bit of server-side setup.
Basically, on the server-side, make sure you have PHP installed, with the iMagick extension, then make the ‘cache’ directory writable by the server.
To use, insert an image into your document:
<img id="image-id" src="an-image.png" alt="" />
And then apply the mask using jQuery:
$('#image-id').maskImage({src:"the-mask.png"});
Simple, innit! That’s a few hours of my own life dedicated to saving a few minutes of yours 😉