Upload and crop image before sending it to the server [closed]

Answer 1

You need to combine a cropping UI with a uploader to complete this complex task. The cropping UI is responsible for displaying the cropping UI and give the cropping coordinates, and the uploader crops & resizes the image, convert it to a blob and upload it to a server.

The cropping UI is common, but the uploader is hard to find. I recommend the cropping UI ImgAreaSelect which is easy to use and this Uploader which is simple and extensible but it is not free.

Answer 2

jcrop

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

Answer 3

The Jcrop Image Plugin might be good at displaying the cropping UI and getting the cropped coordinates in the browser. However, it actually doesn't crop the image. Therefore, the cropping process is done on the server, which is pretty bad for your server performance.

The answer here introduces a Jcrop extension which crops the image in the browser and uploads the cropped image to the server. "It uses Jcrop plugin to crop images, draws the cropped area in the HTML 5 canvas element, converts the canvas to a blob and uploads the image file to the server by AJAX".

The most important part is the canvasToBlob function which converts the HTML 5 canvas element to a Blob type which can be uploaded to the server as images. Unfortunately, this method solely works in AJAX and can't submit a form directly, because the blob can't be put in the standard HTML form element as an input file. In reality, we seldom use form to submit images directly when cropping them.