19

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)

Alex
  • 1,549
  • 2
  • 16
  • 41
Omu
  • 69,856
  • 92
  • 277
  • 407

3 Answers3

20

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.

CD..
  • 72,281
  • 25
  • 154
  • 163
  • 3
    I'd second this. See http://towardsnext.wordpress.com/2009/04/13/crop-image-in-aspnet-using-jcrop-jquery/ for a tutorial using it in MVC. – Dan Diplo Apr 29 '10 at 08:32
  • 5
    yes jcrop is good for cropping, but you have to upload the entire image before cropping it, I would like to know if there is something that will crop the image at the client before sending it to the server – Omu Apr 29 '10 at 08:34
  • Cropping client side would need some kind of plugin, like Flash or Silverlight (you can't do it via JavaScript). – Dan Diplo Apr 29 '10 at 12:38
  • @Dan Diplo I'm ok with Flash, is there something made in Flash for this purpose ? – Omu Apr 29 '10 at 17:52
  • 1
    @Omu - see this post http://stackoverflow.com/questions/2008836/flash-image-upload-with-mandatory-crop Hope it helps? – Dan Diplo Apr 29 '10 at 18:09
10

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.

Community
  • 1
  • 1
  • Good job point to the right answer but just linking without your contribution is not an answer better update your answer to add details or else add this as comment to question and delete this answer – Ram Oct 14 '14 at 00:30
4

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.