JQuery Crop - Cropping images with jCrop

I've made an alternative, with a different UI approach.

jWindowCrop: http://www.tmatthew.net/jwindowcrop

Specify a target width & height, and users will have a frame that size in which they drag/zoom their image to make it fit. Very much like how Facebook's profile image cropper used to work.

I tried a couple of solutions and settled on jCrop as well. It's pretty easy to use, though there was an odd quirk in getting it show an area as precropped (i.e. if someone has previously cropped an image and you want to let them edit it) which I hacked like so http://stackoverflow.com/a/11958515/5958

If you actually want to see it in action, try the real jCrop homepage: http://deepliquid.com/projects/Jcrop/demos.php

In the past, I had to build a crop dialog for an image which had border, padding, negative margin and absolute positioning. IIRC, the only one of these jQuery plugins to get that right -- put the cropper and the mask in the right place -- was imgAreaSelect:

http://odyniec.net/projects/imgareaselect/

The code is imminently readable. One tweak I did add was to expose the variable which references the cropping element container, it's called $area

"I tried a couple of solutions and settled on jCrop as well. It's pretty easy to use, though there was an odd quirk in getting it show an area as precropped (i.e. if someone has previously cropped an image and you want to let them edit it) which I hacked like so http://stackoverflow.com/a/11958515/5958 If you actually want to see it in action, try the real jCrop homepage: http://deepliquid.com/projects/Jcrop/demos.php

Nice hack, in the jCrop official page you can see a lot of more examples and demos.

"If you want to use this with Rails, here's a screencast showing how: http://railscasts.com/episodes/182-cropping-images-revised

Thanks for sharing.

"'ve made an alternative, with a different UI approach. jWindowCrop: http://www.tmatthew.net/jwindowcrop Specify a target width & height, and users will have a frame that size in which they drag/zoom their image to make it fit. Very much like how Facebook's profile image cropper used to work."

Wow, nice work dude! Thank you so much for sharing.

"I've used JCrop pretty extensively, and my only issue with it is that it returns slightly different coordinates on different browsers. It's even possible to coax it into returning coordinates outside of an image. Aside from that, it's pretty awesome, easy to use, and customizable."

I like to use jCrop too, thanks for your feedback.

"Where is the demo?"

You can copy and paste the full source code at the end of the article, or see in the official plugin page.

I've used JCrop pretty extensively, and my only issue with it is that it returns slightly different coordinates on different browsers. It's even possible to coax it into returning coordinates outside of an image.

Aside from that, it's pretty awesome, easy to use, and customizable.

If you want to use this with Rails, here's a screencast showing how: http://railscasts.com/episodes/182-cropping-images-revised

Where is the demo?