Friday, August 3rd, 2007
Edge.js: Mask your images with unobtrusive JavaScript
Category: Canvas
, JavaScript, Library
Christian Effenberger is back with some more Canvas goodness. He has created Edge.js, a library that lets you apply an image mask (in the form of another image) to any image via unobtrusive CSS.
You initialize via:
JAVASCRIPT:
-
-
<script type="text/javascript">
-
var mask2load = new Array();
-
mask2load[0] = "masks/8bit/crippleedge.png";
-
mask2load[1] = "masks/8bit/frizzedge.png";
-
mask2load[2] = "masks/8bit/softedge.png";
-
mask2load[3] = "masks/8bit/splatteredge.png";
-
mask2load[4] = "masks/8bit/waveedge.png";
-
</script>
-
// else only this line...
-
<script type="text/javascript" src="edge.js"></script>
-
And then you can simple add classes to the image: class="edge imask1".
4.3 rating from 54 votes
I can see several of these scripts coming in handy, replacing many CSS based effects I’ve been using in the past. Regrettably, the code isn’t GPL’d and the license terms are too restricting, not to mention subject to change. Are there similar GPL’d or LGPL’d scripts available?
If the code were GPL’d, then I’d give it 5 stars. I do like it, but, I’m sure someone soon will do the same and it’ll have a less restrictive license attached.
Today 19-Nov-2007 I’ve added full support for IE.