Polyclip.js: Clip JPEG Images Into Polygons
Thanks to polyClip.js, you finally don’t have to restrict yourself to using PNG files or a graphics editor whenever you want to use an image of an object without its background. Created by ZoltanDulac, polyclip.js a jQuery plugin or JavaScript library that allows you to crop or clip any image in a non-rectangular way with HTML5 Canvas’ imagemap coordinates.
Why use JPEG with polyclip.js instead of PNG? Because PNG images can’t be as small as JPEG images when you’re dealing with photographic images, and you know how an image’s file size can affect a page’s loading time. What the script does is cut points on the image using x and y values provided by the user. If you know how to create an image map then using polyclip.js should be easy for you to use.
This plugin’s practical value can be subject for debate when you’re dealing with a lot of images but if it’s only for a handful of images, it can be a huge byte-saver.
The polyclip.js is supported by most browsers, including IE7 and 8 but it’s going to require the Excanvas JavaScript library which polyfills canvas using VML for it to function properly. It weighs in at only 2kb but for IE7 and 8, there’s going to be an additional 11kb.
You can download the latest version of polyclip.js over at GitHub. To know more about this plugin/library, you can read about it here.