jQuery maskImage plugin
I had a need today to write some code which involved masking one image with another, dynamically.
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 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 😉
You could achieve the same effect using CSS3 masking, ie. http://trentwalton.com/bgclip/
i find this js more useful,
why css3 when half the world cant see them?
@motzel, from that article: “this will only work in Safari and Google Chrome”
very cool, though – if I update this plugin at some point, I’ll check for the c33s capability first. it’s bound to be more efficient
When I try running the script locally from my file system for some basic testing (not from my webserver) I get an error and the effect fails.
Firebug’s console gives me a security error “Security error:
var imageData=buffer.getImageData(0, 0, width, height);”
Any ideas to get around this?
try running a web server on your local computer and run it through that instead.
Thank you for the reply. After some digging I found this post http://blog.project-sierra.de/archives/1577 and it basically said the same thing you did. I usually run my webserver locally for PHP programing, but didn’t think to try that for what seemed like a simple test.
Since I know the cause I am ok with deploying the script to a production environment knowing the security issues wont be there.
Everything is working on my production server with one exception.
IE displays the alpha channels of the png mask as solid black. The test.html works fine with your images, but for some reason the areas that are supposed to be transparent are showing up black.
I updated this line in the PHP file:
$src->compositeImage($mask, Imagick::COMPOSITE_DSTIN, 0, 0);
$src->compositeImage($mask, Imagick::COMPOSITE_DSTIN, 0, 0, Imagick::CHANNEL_ALPHA);
And it worked fine after that.
Looks like it popped back up even with the changes. Any Ideas?
Hello , nice effect , but can i want to do something will make it caller 😀 , like
when you call the mask you call it from outsource ,
i want to select it from the html page like :
i want to do that to make an animation effect on the mask so it will applied directly to my original image
so can you help me ?
sorry for my bad english 🙄
does not work on opera 11, any ideas?
Excellent. Thank you so much!
Wow! great plugin!
I must give it a try..
And by the way.. I think it could be great if you share it via github
After quick looking I found out that this script usign PHP… yakkk
so.. I decide to develop my own script who create image-mask with JS only!
hope you will find it usefull!