GWT 客户端图像裁剪和调整大小

Posted 2023-02-25

【中文标题】GWT 客户端图像裁剪和调整大小

【英文标题】：GWT client-side image crop and resize

【发布时间】：2009-06-12 12:40:05

【问题描述】：

是否有任何 GWT 小部件可以让我：

选择图像的一部分，然后检索选择区域？ 调整图像大小，然后给我更新后的大小？

以上内容也应该反映在浏览器中。

【问题讨论】：

那么你能找到解决方案吗？我也在寻找同样的功能。

@bhargava：抱歉，还没有运气。

【参考方案1】：

据我所知，GWT 客户端代码无法直接修改图像，但可以将 Image 小部件设置为仅显示图像的一部分。您可以使用constructorImage(java.lang.String url, int left, int top, int width, int height) 执行此操作，其中width 和height 是可见框的尺寸，而不是图像本身。

但是，这不允许您调整大小然后裁剪。为此，您可以先调整图像大小，然后将其放在绝对面板中进行裁剪。

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

如果这不是您正在寻找的内容，我深表歉意，但这是我所拥有的最佳答案。

【讨论】：

这是我想做的一部分，但选择应该基于用户操作，例如发生的情况。 Photoshop。

如果您希望用户能够在文本框中输入裁剪值，您可以使用 ChangeHandler 将图像的位置和面板的大小更新为文本框的值。如果您希望用户能够拖动一个框并根据该框的尺寸对其进行裁剪，您可能需要一个拖放库。

【参考方案2】：

如果您希望使用 setPixelsSize() 进行缩放，也可以将图像类型加载为 DataResource 而不是 ImageResource

例如

...

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

...

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

【参考方案3】：

Here 是我使用 canvas 元素使用 html5 缩放图像的方式。

【讨论】：

我热衷于使用 HTML5 画布，但 IE8 不支持 HTML5 画布。

【参考方案4】：

谢谢 ImageResource 具有相同的方法 getURL() 我用它为我工作.. 试试这个它会工作我们现在可以以两种方式使用图像作为 URL 路径或 ImageResource..