I recently had the need to do some automated image cropping. I was already using the wonderful ImageResizing.Net plugin, which made all of the server code very easy. It came with some sample code that uses the JCrop plugin (by Deep Liquid).
Jcrop does it’s job very well. However…
In the modern web development environment, plugins are both a blessing and a curse. The blessing portion is that the plugins work very well. JCrop is no exception. It does a great job selecting the proper portions of an image to crop in an easy and intuitive manner. So far so good.
The curse is that every need is somewhat new to the world, and the factory settings ALMOST apply, but not quite. I was pulling a list of uploaded images from the server, and I wanted the images to pop up in a normal jquery ui modal dialog window. It was trivial to display the large photos from a list of thumbnails. So….
Now to integrate the two
I opted to have the JCrop appear after the thumbnail was clicked. It did. So far so good.
Then I ran into problems. After you select one image, no matter what you select next, the first image will always show up in the modal window, which was a considerable problem. If you disable JCrop the problem went away, but no matter what combinations I tried in terms of loading order, ready states and dailog and object creation I could not get jCrop to to work in this situation.
Mind you, this is not jCrop’s problem, but it was not the situation I was trying to use
Enter ImgAreaSelect
After quite a few hours I gave up and let my fingers do the googling for other plugins. I was led to ImgAreaSelect – which was simple and easy to use, and did not have the problems with the dialog boxes that jCrop did. The documentation was good too.
|
|
Written By Steve French |
Thank you! I’ve spend a whole day with Jcrop and the same problem you are talking about — no result. I’ve used
JQueryUI dialog (modal)
ImgAreaSelect
and canvas to show preview
everything works!