GWT client-side image crop and resize

Question

Is there any GWT widget which allows me to:

select a part of an image and then retrieve the selection area?
resize an image and then give me the updated size?

The above should be reflected in the browser as well.

So were you able to get the solution for it?I am also looking out for the same function. — Barry, Oct 26 '10 at 23:05

score 7 · Answer 1 · answered Jun 12 '09 at 14:16

As far as I know, GWT client-side code cannot directly modify images, but the Image widget can be set to display only a portion of an image. You can do this using the constructor Image(java.lang.String url, int left, int top, int width, int height), where width and height are the dimensions of the visible box and not the image itself.

However this does not allow you to resize and then crop. In order to do this you could first resize the image then put it in an absolute panel to crop it.

AbsolutePanel testPanel = new AbsolutePanel();
Image image = new Image("path/image.jpg");
image.setWidth("1000px");
testPanel.add(image,-100,-100);
testPanel.setPixelSize(300,300);

I apologize if this isn't exactly what you're looking for, but it's the best answer I have.

This is part of what I'd like to do, but the selection should be based on user action, like what happens in e.g. Photoshop. — Robert Munteanu, Jun 12 '09 at 14:21
Well if you want the user to be able to enter crop values into text boxes, you can use a ChangeHandler to update the Image's position and the panel's size to whatever the values of the text boxes are. If you want the user to be able to drag a box around and have it crop based on the dimensions of that box, you'll probably need a drag 'n drop library. — DLH, Jun 12 '09 at 14:45

score 3 · Answer 2 · answered Feb 18 '11 at 00:59

You can also load the image type as a DataResource instead of ImageResource if you want it to scale with setPixelsSize()

e.g.

...

@Source("uploading.gif")
DataResource uploadingIcon();

...

Image uploadingGif = new Image(RESOURCE.uploadingIcon().getUrl());
uploadingGif.setPixelSize(25, 25);

score 2 · Answer 3 · edited Jul 23 '12 at 18:52

2

Here is how I use the canvas element to scale images using HTML5.

edited Jul 23 '12 at 18:52

David Kroukamp

36,155
13
81
138

answered Mar 25 '11 at 14:25

Brandon

2,034
20
25

I was enthusiastic about using HTML5 canvas but IE8 does not support HTML5 Canvas. – Jun 09 '12 at 17:51

score 1 · Answer 4 · answered Apr 23 '12 at 10:30

1

Thanks ImageResource have same method getURL() i used it worked for me.. try this it will work we can use now Images in both ways either as URL path or ImageResource..

answered Apr 23 '12 at 10:30

JAVAC

1,230
3
17
38

GWT client-side image crop and resize

4 Answers4

Linked