I had a need today to write some code which involved masking one image with another, dynamically.
So, I wrote my own.
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 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:
Simple, innit! That’s a few hours of my own life dedicated to saving a few minutes of yours 😉