Upload and crop image before sending it to the ser

问题:

Is there some client components (jquery/swf) that will give the possibility to upload and crop (user should be able to select the area to crop) an image in the browser and then send the cropped image to the server?

I'm on asp.net-mvc (not sure if it matters)

回答1:

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.

回答2:

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.

回答3:

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.