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.

demo

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 ;-)

About Kae Verens

owner of KV Sites, author of two books, father of two children.

14 Thoughts on “jQuery maskImage plugin

  1. motzel on August 31, 2011 at 8:38 am said:

    You could achieve the same effect using CSS3 masking, ie. http://trentwalton.com/bgclip/

  2. Kae Verens on August 31, 2011 at 9:41 am said:

    @motzel, from that article: “this will only work in Safari and Google Chrome”

  3. Kae Verens on August 31, 2011 at 9:49 am said:

    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

  4. 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?

  5. Kae Verens on January 10, 2012 at 12:11 am said:

    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

  6. 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

  7. Looks like it popped back up even with the changes. Any Ideas?

  8. Hello , nice effect , but can i want to do something will make it caller :D , 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 :roll:

  9. does not work on opera 11, any ideas?

  10. mishan randika on September 5, 2012 at 8:46 am said:

    Excellent. Thank you so much!

  11. 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

  12. 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!

Leave a Reply

Post Navigation

%d bloggers like this: