Crop a face/head using oval/polygonal shapes without using flash? (ajax or html5?)

My mission is to let users upload their own photos then the site crops the face+hair and pastes them on an ecard. The tough part is that I'm not allowed to use flash =/

I understand there are ajax or js face detection solutions out there, but what stumps me is how do I crop an odd shaped pa开发者_如何学Cttern. Imagemagick/graphicsmagick as I know can only crop a rectangular or square shaped object (please correct me if I'm wrong). Will this pretty much destroy the whole idea until im has the functionality to crop odd shapes? or are there other ways to crop circles or polygons?

An idea popped up to maybe allow the user to draw some lines in their photo for cropping then maybe the site converts the lines to a vector and fills a color around the lines, the colors are then converted by im to transparent... but then I have no idea how to start this one.. probably not possible at the moment (?).

I'm running out of ideas :(

I have just successfully created a crop :) although not perfect it should work in android or iphone/ipad.

Basically I used a js plotting tool to mark the coordinates, save all those coordinates somewhere.

Then use the coordinates for imagemagick, it appears that although IM doesn't really crop odd shapes it can however use 'mask' to convert the bg of the photo by combining the stencil (where we draw the lines using our coordinates, fill the bg with #000000 color) and the original photo.

The result should be the crop we are looking for :) now we added in some feathering since it's kinda edgy. All this using imagemagick.

Now all we needed are curvier lines since I used 'path' in IM which doesn't really offer a smooth crop. Someone suggested to use 'cubic curves' but may require additional coding since it needs some parameters for each coordinate.

This command will create our stencil (the long set of numbers are our coordinates):

convert -size 450x125 xc:black -fill white -stroke black -draw "path 'M +60+9 +94+18 +96+19 +84+27 +92+36 +97+43 +103+56 +102+58 +109+66 +109+74 +101+68 +98+76 +98+84 +95+88 +98+91 +106+95 +110+99 +111+103 +99+106 +89+108 +73+112 +56+109 +40+109 +26+103 +37+97 +46+91 +48+88 +39+80 +36+71 +32+78 +27+72 +30+61 +35+55 +42+41 +30+37 +40+24 +51+14 +156+9 +197+6 +236+8 +269+16 +265+36 +248+50 +222+52 +213+35 +198+24 +174+18 +155+13 +60+9'" stencil.gif

We will then combine the stencil with the original image (which should bring out our transparent 'crop'):

convert original.jpg stencil.gif -alpha off -compose CopyOpacity -composite combined.png

Finally we feather out the edges:

convert combined.png -alpha set -virtual-pixel transparent -channel A -blur 0x0.7 -level 50,100% +channel -background none -flatten final.png

This is how it works now : https://lh6.googleusercontent.com/_2lSoW37_zqo/TYCD65Vu4zI/AAAAAAAAEcc/vjlCPM54FTI/s800/theoryinpractice.jpg 

That's about it, I hope this helps someone.