在 GWT 中更改 Image 小部件的大小会更改图像元素的大小，但不会重新缩放屏幕上的图像。因此，以下内容将不起作用：
Image image = new Image(myImageResource);
image.setHeight(newHeight);
image.setWidth(newWidth);
image.setPixelSize(newWidth, newHeight);
这是因为 GWT 通过使用 CSS 将 HTML <img... /> 元素的 background-image 设置为图像来实现其 Image 小部件。
如何调整实际图像的大小？
【问题讨论】：
标签： java gwt image-scaling
我看到了this blog entry，它通过使用 GWT DataResource 而不是 ImageResource 解决了这个问题。事实证明，同样的技术实际上也适用于 ImageResource，如果你按如下方式使用它：
Image image = new Image(myImageResource.getURL());
image.setPixelSize(getLength(), getHeight());
要保持纵横比计算如下：
Image image = new Image(myImageResource.getURL());
image.setPixelSize(newWidth, myImageResource.getHeight() * newWidth / myImageResource.getWidth());
从 GWT 2.4 开始，使用（参见 here）：
Image image = new Image(myImageResource.getSafeUri());
image.setPixelSize(newWidth, myImageResource.getHeight() * newWidth / myImageResource.getWidth());
【讨论】：
ImageResource 的目的，不是吗？这不是说每次调用这个方法时都要从服务器加载图片吗？
如果我们想在 UIbinder 中做同样的事情。然后从外部资源：
例如我们在资源中
@Source("images/logo.png")
ImageResource getLogo();
在 UiBinder 模板中声明 <ui:with> 元素：
<ui:with field='res' type='com.myapp.client.Resources'/>
及以下：
<g:Image url='{res.getLogo.getSafeUri.asString}' pixelSize="Width, Height" />
在旧 GWT 版本中：
<g:Image url='{res.getLogo.getURL}' pixelSize="Width, Height" />
但现在 - 已弃用。
不要使用：
<g:Image resource='{res.getLogo}' pixelSize="Width, Height" />
因为它不会缩放图像
【讨论】：
试试图片加载器小部件http://code.google.com/p/gwt-image-loader FitImage 类提供您正在寻找的内容。
PS：也应用问题的补丁，因为我已经修复了一些小错误
【讨论】：
我的最终解决方案是在图像上添加一个负载处理程序，以根据加载图像的尺寸调整它的大小（即尊重比率）。
image.addLoadHandler(new LoadHandler() {
@Override
public void onLoad(LoadEvent event) {
Element element = event.getRelativeElement();
if (element == image.getElement()) {
int originalHeight = image.getOffsetHeight();
int originalWidth = image.getOffsetWidth();
if (originalHeight > originalWidth) {
image.setHeight(MAX_IMAGE_HEIGHT + "px");
} else {
image.setWidth(MAX_IMAGE_WIDTH + "px");
}
}
}
});
其中MAX_IMAGE_WIDTH 和MAX_IMAGE_HEIGHT 是确定图像最大允许大小的常量。
【讨论】：
我编写了一个接受 ImageResource 对象的类，您可以设置所需的图像像素大小。它使用 CSS background-Position 和 CSS background-size 来达到目的：
ScalableImage类的源码为：
package de.tu_freiberg.informatik.vonwenckstern.client;
// class is written by Michael von Wenckstern, and is also used in ist diploma Thesis
// (this is only for my super visor, that he does not think I copied it from stackoverflow
// without mention the source) - this class is free to use for every body
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.Image;
public class ScalableImage extends Image {
private int width;
private int height;
private ImageResource res;
public ScalableImage(ImageResource res, int width, int height) {
this.setUrl(res.getSafeUri());
this.res = res;
this.width = width;
this.height = height;
}
@Override
public void onLoad() {
int widthOfBigImage = this.getOffsetWidth();
int heightOfBigImage = this.getOffsetHeight();
double scaleX = width / res.getWidth();
double scaleY = height / res.getHeight();
this.setResource(res);
DOM.setStyleAttribute(getElement(), "backgroundPosition", Integer.toString((int) (res.getLeft() * -1 * scaleX))+"px "+
Integer.toString((int) (res.getTop() * -1 * scaleY))+"px ");
DOM.setStyleAttribute(getElement(), "backgroundSize", Integer.toString((int) (widthOfBigImage * scaleX))+"px "+
Integer.toString((int) (heightOfBigImage * scaleY))+"px ");
this.setPixelSize((int) (res.getWidth()* scaleX), (int) (res.getHeight() * scaleY));
}
}
你可以按如下方式使用这个类：
rootPanel.add(new ScalableImage(Images.Util.getImages().img0(), 60, 60));
如果您将此类与 PushButton 一起使用，则必须将 PushButton 添加到 RootPanel，否则不会调用 onLoad() 函数。 示例源代码如下所示：
for(ImageResource imRes: latexIconsClientBundle) {
ScalableImage im = new ScalableImage(imRes, 60, 60);
RootPanel.get().add(im); // PushButton class does not fire onAttach event, so we need to attach the image to the RootPanel
PushButton btn = new PushButton(im);
btn.setPixelSize(60, 60);
if(++col > 9) {
row++;
col = 0;
}
this.setWidget(row, col, btn);
}
【讨论】：
ImageResource 则无用，例如将一些com.sencha.gxt.data.shared.IconProvider 用于一些带有图标的Tree 组件
这是我使用 canvas 元素使用 HTML5 缩放图像的方法。
http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5
布兰登·唐纳尔森 http://gwt-examples.googlecode.com http://c.gawkat.com
【讨论】：
从我所有的测试来看，只有当你的包中有一张图片时，safeURI 才有效......所以使用它没用，因为你有一个 Bundle 的 cache.png，所以它什么都不优化！
【讨论】：