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 😉
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?
hi David,
browsers don’t like letting you read files that are on your computer. otherwise you would have hackers writing JavaScripts that can read your files through Ajax and pass them on to whoever they wanted.
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.
Thanks again!
David
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);
To Be:
$src->compositeImage($mask, Imagick::COMPOSITE_DSTIN, 0, 0, Imagick::CHANNEL_ALPHA);
And it worked fine after that.
Thanks,
David
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 :
$(‘#image-id’).maskImage({(“#img1”)});
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
Hey guys!
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!
http://almogbaku.github.com/imageMask/
hope you will find it usefull!