For a social application, I need to provide a nice and user-friendly avatar upload mechanism. The user shall be able to pick an arbitrary image file, select and crop it to the most relevant area (using a fixed aspect ratio and a highlight box with handles) and upload it after this has been done. Ideally, all pre-processing should happen on the client side, and it should also be possible to auto-scale the cropped image to a maximum size.
After the avatar is ready on the client-side, I will upload it to an S3 bucket using slingshot (to support a direct upload from a mobile device w/o roundtrip to the server), but this upload process is out of scope of my question, I already have implemented this. All I need is a way to access the image after the preprocessing steps (i.e. after file picking, highlight selection, cropping, and auto-scaling).
I already found out-of-the-box solutions like particle4dev:upload-avatar, which is pretty close to my expectations from a UI point of perspective, but I need more control over the overall process, so I am rather looking for a good toolset / combination of technologies to achieve my goal. Or a sample repository of a similar application to learn from it.
It would be great if this toolset would also support mobile devices, e.g. by scaling the image using a pinch-zoom gesture.
Does anybody have some tips where to find this kind of toolset, or parts of it?