1

I'm trying to implement an image gallery with GWT. My intention is to show a list of albums, when you click on one of them show a grid with the photo's thumbnails on it and, when you click on one of them, show the full-size image in a popup window. I've succeeded on the first and last points, but I'm getting a lot of problems building the thumbnails.

My idea is to have squared, fixed size thumbnails. To do so, I try to scale and then crop them. But it doesn't work. If I only scale them it works, if I only crop them it works, but when I try to scale&crop only the last operation is executed. This is what I coded to do that:

prop = (float)img.getWidth() / img.getHeight();
thumb = new Image(img.getUrl());
if (thumb.getWidth() > thumb.getHeight()) {
    thumb.setHeight("150px");
    thumb.setWidth(String.valueOf(150 * prop) + "px");
} else {
    thumb.setWidth("150 px");
    thumb.setHeight(String.valueOf(150 * Prop) + "px");
}

offset = thumb.getHeight()*(prop-1) / 2;

if (thumb.getWidth() > thumb.getHeight()) {
    thumb.setVisibleRect((int)offset, 0, 150, 150);
} else {
    thumb.setVisibleRect(0, (int)offset, 150, 150);
}

I've been looking for help about this and I found several solutions. Based on another question in this website I found this, but it's not applicable to my case, because I need to load the images dinamically. I also tried with GWT and HTML5, following this example, but when the following method is executed:

ImageData imageData = context.getImageData(sx, sy, sw, sh);

it raises the following exception:

(NS_ERROR_DOM_INDEX_SIZE_ERR): Index or size is negative or greater than the allowed amount

So, if anyone knows how to do it with pure GWT, or solve de HTML5 error, I will be very pleased, I've been stuck on this for many weeks :(... thanks in advance!

Community
  • 1
  • 1
SeGar
  • 11
  • 1
  • 1
    Why do you test the same condition twice? You should optimize your code first and then try to find what is wrong – Adel Boutros Dec 23 '11 at 14:56
  • Yes, you're right, it was a dirty and quick example, but anyway it should work. – SeGar Jan 09 '12 at 16:57
  • No, I'm getting mad about it. As soon I work it out, I'll update the post (unless other person do it for me ;) – SeGar Jan 10 '12 at 11:11
  • The error you are getting is typical Javascript. Are you sure the Image is rendered on the page before you are calling it? – Adel Boutros Jan 10 '12 at 11:51
  • I don't know, and don't know how to check it in GWT. In fact there is a onLoaded() method you can assign to an image so, when it's loaded (theory), you can execute some code (for example, make it visible, or put it somewhere). But it is not working neither :( – SeGar Mar 28 '12 at 10:25
  • So far you have a full image loaded on client - why do you need to create new one for thumbnail? Just use the same image, but scale it with width and height attributes - modern browsers scale images correctly. To crop it you may just place it into div with "overflow: hidden" style and according offset. – domax Feb 14 '14 at 17:19

0 Answers0