Crop & Upload is a useful, convenient and extensible Javascript image library which crops images in the browser and uploads the cropped image to the server.
It was very hard for web application to crop images at the client side before unless you used flash or other heavy plugins. The canvas element in HTML 5 makes it easier to do this task, though you have to deal with the complicaated decoding process and cross-browser problems by yourself. There are many libraries like Jcrop and ImgAreaSelect, which provide very fancy cropping UI, but they solely provide the cropping coordinates to the server and don’t do the cropping themselves. Eventually, the server is responsible the cropping and saving tasks, which is impossible for static storage servers like the Amazon S3 server.
This library takes care of these issues and provides you with an easy interface so that you can do it with only one function call. It crops & resizes images solely in the browser and uploads the cropped, resized & scaled images to the server, so that the workload of the server side, network transportation and the developing complexity are reduced significantly. You can upload multiple images and other data while displaying the uploading percentage.
This library has the following features:
Works in all the modern major browsers. It provides a simple, extensible interface by taking care of the complex processes and compatible issues.
Cropping and resizing is done at the client side. Reduce the workload of the server side drastically.
Support multiple image uploads. You can also use the utility function to customize the uploading process.
Support onprogress event when uploading images. Hence the uploading percentage can be easily displayed.
Now you can combine many beautiful cropping UI with this library to do both the cropping and uploading operations in the browser!
