Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript crop image client-side [duplicate]

I'd like to use javascript or jQuery to crop and compress an image on the client side before uploading to the server.

WorkFlow:

  1. Select Image
  2. Crop Image to specific size
  3. Compress the crop
  4. Upload

Has anyone done this before? What plugin or what do I have to do?

I see facebook can do compressing images and automatically resizing them before uploading.

like image 996
Shawn Mclean Avatar asked Jul 27 '11 16:07

Shawn Mclean


1 Answers

EDIT (2014): This answer is now obsolete! JavaScript is a programming language with implementations that are deeply influenced by what browser resources are being made available to them. Three years ago when this post was made (July 2011) browsers didn't have any kind of reliable functionality which would allow OP to do what he asked for, hence my answer.
If you are still interested in how this can be done now please consult some of the many answers to this question which have appeared in the meantime on SO. But please restrain yourself from making any further comments to this answer because its obviously pointless. Thank you.

Simply put JavaScript is not meant to do what you are asking for. Whatever service you encounter that offers the ability to manipulate selected images you can bet your money that the image has been uploaded completely to the server before any other functionality was offered.

like image 109
brezanac Avatar answered Oct 08 '22 05:10

brezanac