javascript - Crop images on a web page in a non linear / rectangular manner so any form of polygon -

Curious to hear other people's thoughts.

I have to do this scenario ...

1. User Upload Image (easily in the scripting language of my choice in php)
2. Then they The image can crop in the browser but not only to enable a sub-selected rectangle, for example a person, and then 'cut' or 'isolated' so they can be added in a different background for example is.

   Then Flash is the first thing to mind but I would like to avoid it if poss (keeping other things as ipad friendly) I think html5 / css3 / javascript leaves and probably the most important Html canvas

   Would I like to avoid anything like Java etc and keep it in simple web technologies?

   I had a quick Google but nothing seemed to jump.

   > Suggestion is welcome!

   You can do it with canvas, especially clipping path:

     var img = new image (); Var reference = canvas.getContext ('2d'); Img.onload = function () {context.beginPath (); Context.moveTo (10,10); Context.lineTo (300,200); Context.lineTo (100,150); Context.clip (); Context.drawImage (IMG, 0,0)} img.src = 'example.png';   
    Of course you have to write some UI which sets the user number. You can either directly  & lt; Input & gt; You can get the image from  via  input.files [0]  and  FileReader  API and then send it with XHR2, or upload it to the server Get after.