GWT Image Cropping

Question

I'm building a website using GWT and would like to add Image Cropping capability so users can upload their profile image and then crop it as they need to. I'm looking for something similar to Jcrop but in GWT.

I found THIS and THIS code samples how to crop an image on the client side but there is no UI part where user can select part of their image that needs to be cropped.

There were also couple of similar questions on SO (for example and this GWT with Jcrop) but nobody gave an example of the selection part of the image that uses pure GWT. If you have an idea how to do it please share and I'm sure other people will leverage from this in the future.

Here is the example of what I'm looking for:

Answer 1

I recommend that you take route #1. I've been working full time in GWT for awhile and spend a lot of time looking for libraries, and this is one that I just don't think exists yet.

Here are your options:

1. Wrap Jcrop using a JSNI interface.

   • Pros: You have to include JQuery and JCrop, which are small and robust
   • Cons: Learning how to build your first JSNI wrapper can be a pain

2. Build your own from GWT Drag and Drop

   • Pros: "Pure GWT"
   • Cons: You probably won't handle all the edge cases that JCrop has figured out over time, nor be as featureful.

3. Port JCrop to GQuery

   • Pros: JCrop is open source and only around ~1600 lines of code
   • Cons: It's ~1600 lines of code, which is likely to be much bigger when ported to Java

If you decide to do any of the above, please open source it! I'd be happy to contribute, and it looks like something that I could use in my GWT projects as well.

Answer 2

GWT Cropper is a widget that allows cropping an image.

https://code.google.com/p/gwt-cropper/

Edited in 2015: as long as Google Code is about to be closed, the project has been moved to GitHub. The new address is https://github.com/w32blaster/gwt-cropper