jQuery and a div so user can crop an image?

I just thought I'd post here to see if there's a more efficient method.

I want the user to be able to select a part of an image, then add an effect to it (Sepia, Black & White etc.) and then when they're done I can generate this new, cropped image with the effect.

I'm using jQuery UI to have a div that the user can drag and resize on top of the image.

I'm also using Pixastic to add the image effects in realtime on modern browsers (older browsers will have a note saying your browser sucks, the effects will be added in the next page)

Then using the divs position and size and the selected effect I can crop and apply the effects in PHP on the next page to create the actual image.

Is this a sensible way of going about it? I don't want to have to use HTML5 because then I'm waving goodbye to most IE users which isn't really a possibility...

Also if anybody could comment on the method I'm using with CSS clip to black out the rest of the image, that'd be helpful.

Edit: Link - http://dev.ashleybyrom.co.uk/dragresize/ I'm still playing with it so expect bugs. (If anybody knows how I could fix it so the rest of the image stays blacked out in Chrome when you add an effect that would be nice!) - Doesn't work fully in IE yet either so don't bother going on it in IE yet..

Edited May 12, 201214 yr by Ashley Byrom