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

Is there any GWT widget which allows me to:

是否有任何GWT小部件允许我:

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.

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

4 个解决方案

#1

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.

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

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.

如果这不是您正在寻找的,我道歉,但这是我的最佳答案。

#2

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

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

e.g.

...

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

...

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

#3

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

以下是我使用canvas元素使用HTML5缩放图像的方法。

#4

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..

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

#1