Cropping image - best way to do it

Question

So far we had simple image upload to node.js server and then to S3 bucket. We had only type and file size check. I need to implement cropping on the client side. After lots of research and reading, it seems that this is the choice:

1. Nodee.js side I will use imagemagick
2. Client side I will use Jcrop

Idea is as follows: 1. User will send uncropped image to server which will upload it to Amazon S3 2. After the image is uploaded to S3 (maybe save temp image to server), its link will be sent to user side and Jcrop will be activated on that image 3. User will crop the image and send the cropping information to the server, which will in turn use that information and feed it to imagemagick 4. Image magick will resize the image 5. Image will be uploaded to S3 and user will receive another link with resized image

I am having couple of questions here. I am certain that someone did it before, and I would appreciate your experiences.

A. Is this strategy ok. I routing between server , client and S3. If there is place for improvement please say so :) B. I will send cropping data to imagemagick. And Image magick will perform crop thing on the same image.

Is this kinda ok? Any example code to check?

Answer 1

What you are proposing is a good solution IF you need to support older browsers as well. Otherwise, it may be redundant.

If you do not mind excluding older browsers (which include IE 8 and lower), with HTML5 and the canvas element you can resize and crop images directly in the client.
There are many topics about this, for example: Cropping images in the browser BEFORE the upload