4 ms·

JQuery Crop - Cropping images with jCrop

20 points by PatriciaLopes 14y ago

rduchnik 14y ago
Where is the demo?
eli 14y ago
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 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 http://deepliquid.com/projects/Jcrop/demos.php
tybro0103 14y ago
I've made an alternative, with a different UI approach. jWindowCrop: http://www.tmatthew.net/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.
jessedhillon 14y ago
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/ 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
- ricardoarrigoni 14y ago
  This plugin is good too, with him is possible to crop the image or just select a specific area?
ru_nj 14y ago
What the heck... Server side cropping? This is news?
weareschizo 14y ago
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.
cmer 14y ago
If you want to use this with Rails, here's a screencast showing how: http://railscasts.com/episodes/182-cropping-images-revised http://railscasts.com/episodes/182-cropping-images-revised
deleted 14y ago
[deleted]
ricardoarrigoni 14y ago
"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 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 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 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 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.

20 points by PatriciaLopes 14y ago

Where is the demo?

eli 14y ago

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 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 http://deepliquid.com/projects/Jcrop/demos.php

tybro0103 14y ago

I've made an alternative, with a different UI approach. jWindowCrop: http://www.tmatthew.net/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.

jessedhillon 14y ago

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/ 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

ricardoarrigoni 14y ago
This plugin is good too, with him is possible to crop the image or just select a specific area?

ru_nj 14y ago

What the heck... Server side cropping? This is news?

weareschizo 14y ago

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.

cmer 14y ago

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

deleted 14y ago

[deleted]

ricardoarrigoni 14y ago

"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 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 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 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 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.