25 Aug

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 😉

14 thoughts on “jQuery maskImage plugin

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

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

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

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

  5. 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 🙄

Leave a Reply