How to trim image in the web-browser using js and save it on server then?

Question

I'm looking for some jQuery plugin or smth similar.

For example, I need to crop a photo on website and to save the result on server.

I know that it is better to do it in Adobe Flash, but I really need to do in using JS.

Answer 1

Very few browsers support selecting an image with Javascript and manipulating it without first uploading it to a server. Instead, you'll need to:

1. Allow user to upload image to server
2. When upload is complete, resize the image (with PHP) to a manageable size for the browser for preview
3. Show the resized preview image in the browser in something like JCrop
4. After the user chooses the crop area, have them click "Save"
5. On Save, pass the coordinates of the cropped area to the server/PHP to have it crop the original image. You'll have to scale the coordinates for the preview to coordinates for the original image.
6. Save the new image to disk/S3/whatever with PHP

I managed to do this without ever using my server or having the image touch my server by using http://transloadit.com/. I use transloadit's Javascript upload form to upload to their server storage (S3) and use a template that saves the original and resizes for preview. Both the original and preview are stored in transloadit's temporary S3 account, not mine. I then use JCrop to show the user the preview. Once they select the crop area I then tell transloadit to crop the original photo but with my crop coordinates (scaled from the preview image to fit the original) using a template that also makes several thumbnail sizes. Transloadit then saves all the images to my S3 account and tells me the URL where it saved it.

Answer 2

You are looking for JCrop

Here are some demos.

Here is an example implementing in on PHP.

Answer 3

Check out jCrop. It's perfect for this stuff.