Html GWT中的缩放和裁剪图像

我正在尝试用GWT实现一个图像库。我的意图是显示一个相册列表，当你点击其中一个时，显示一个带有照片缩略图的网格，当你点击其中一个时，在弹出窗口中显示完整大小的图像。我在第一点和最后一点上都取得了成功，但是我在构建缩略图时遇到了很多问题

我的想法是要有固定大小的正方形缩略图。为了做到这一点，我尝试缩放然后裁剪它们。但它不起作用。如果我只缩放它们，它会工作，如果我只裁剪它们，它会工作，但是当我尝试缩放&裁剪时，只执行最后一个操作。这就是我编写代码的目的：

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);
}           

我一直在寻求帮助，我找到了几个解决方案。基于我发现的，但它不适用于我的情况，因为我需要以友好方式加载图像。我还尝试了GWT和HTML5，如下所示，但在执行以下方法时：

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

它引发了以下异常：

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

---

所以，如果有人知道如何使用纯GWT，或者如何解决反HTML5错误，我会非常高兴，我已经在这方面坚持了好几个星期：。。。提前谢谢

为什么要对同一条件进行两次测试？你应该先优化你的代码，然后试着找出错误是的，你是对的，这是一个肮脏而快速的例子，但无论如何它应该是有效的。不，我对此很生气。一旦我解决了，我会更新帖子，除非其他人帮我做；您得到的错误是典型的Javascript。在调用之前，您确定该图像已呈现在页面上吗？我不知道，也不知道如何在GWT中检查它。事实上，有一个onload方法可以指定给图像，因此，当图像加载时，您可以执行一些代码，例如，使其可见，或将其放置在某个位置。但它也不起作用：