Client-Side Image Manipulation (Cropping)

Question

I am building a web application using Parse as my backend.

Part of the signup process involves the user uploading and cropping an image before I pass it along to my database (the picture is part of the user profile, similar to what you would do on Twitter).

I have figured out the uploading parts (both to the browser and then to the database), but I am not as confident with allowing the user to manipulate the image.

Most solutions involve using jCrop to achieve a result similar to the example here (although without the PHP).

Given that I am using Parse, is there a client-side solution that works better? How might a solution look?

Thanks!

Jesse

Answer 1

Basically I would go this way:

1. Load your image into a <canvas>
2. Crop the Image: http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
3. Save a image from the canvas: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

Here is a very good tutorial.

Disclaimer: I haven't tested this yet, but I heard that this way work.

Also use background-size:cover; or background-size:contain; to get around nasty dimension problems.