GWT客户端裁剪 [英] GWT client side cropping

问题描述

我被困在集成gwt与JCrop或imgareaselect JavaScript库
我有一个图像，每当客户端更改从其文件系统选择的文件（使用上传小部件）时，URL都在更改。
我希望用户在图像中选择区域，这样我就可以让图像的宽高比尊重客户的意愿。
问题是我无法成功imgareaselect或jcrop调用加载事件，每次我有空，如果我尝试jQuery（imagepreview）jquery是未知的执行时间，如果我尝试一些$（ #imagepreview）我得到一个$是未定义的...

请任何帮助...
问候。

  public class ThisWidget extends LayoutContainer {
 
 
 public void onRender（Element parent，int index）{
 super.onRender （父母，指数）; 
 setLayout（new VBoxLayout（））; 
 setWidth（100％）; 
 
 final FormPanel uploadPhotoPanel = new FormPanel（）; 
 uploadPhotoPanel.setWidth（100％）; 
 uploadPhotoPanel.setHeight（150px）; 
 
标签标签=新标签（Ajouter une photo）; 
 add（label）; 
 
 uploadPhotoPanel.setAction（GWT.getModuleBaseURL（）
 +photoload / uploadpreview.ctz）; 
 uploadPhotoPanel.setEncoding（FormPanel.ENCODING_MULTIPART）; 
 uploadPhotoPanel.setMethod（FormPanel.METHOD_POST）; 
 
 
 final FileUploadField file = new FileUploadField（）; 
 file.setName（FILE）; 
 uploadPhotoPanel.add（file）; 
 file.addHandler（new ChangeHandler（）{
 @Override 
 public void onChange（ChangeEvent event）{$ b $ uploadPhotoPanel.submit（）; 
 
} 
}，ChangeEvent.getType（））; 
 
 final Button btn = new Button（Ajouter，
 new SelectionListener< ButtonEvent>（）{
 @Override 
 public void componentSelected（ButtonEvent ce）{
 uploadPhotoPanel.submit（）; 
} 
}）; 
 
 
 
最终形象previewimage; 
 
 previewimage = new Image（）; 
 DOM.setElementAttribute（previewimage.getElement（），id，
previewimage）; 
 previewimage.setSize（200px，200px）; 
 
 
 previewimage.addLoadHandler（new LoadHandler（）{
 
 protected native void onPreviewLoad（）/ *  -  {
 document.getElementById（previewimage ）.imgAreaSelect（{
 aspectRatio：'1：1'，
句柄：true，
 fadeSpeed：200 
}）; 
 
}  -  * /; 
 
 @Override 
 public void onLoad（LoadEvent event）{
 onPreviewLoad（）; 
}}）; 
 $ b $ uploadPhotoPanel 
 .addSubmitCompleteHandler（new SubmitCompleteHandler（）{
 $ b $ @Override 
 public void onSubmitComplete（SubmitCompleteEvent event）{
 previewimage.setUrl （GWT.getModuleBaseURL（）
 +photoload / downloadpreview.ctz？tsp =
 + System.currentTimeMillis（））; 
} 
}）; 
 
 add（uploadPhotoPanel）; 
 add（previewimage）; 
 add（btn）; 
  

}

解决方案使用 $ wnd。$（＃imagepreview）或 $ wnd.jquery（＃imagepreview）

（更新以修复被遗忘的＃）

I'm stuck on integrating gwt with JCrop or imgareaselect javascript libraries I have an image, which url is changing each time the client change the file choosen from its filesystem (using an upload widget). I want the user select the area in its image, this way i will be able to have images with aspect ratio respected respect to the client wishes. Problem is i can't succed in making imgareaselect or jcrop called on load event, each time i have null, if i try jquery ("imagepreview") jquery is unknow at execution time, if i try some $("#imagepreview") i get a $ is undefined...

PLEASE any help... Regards.

public class ThisWidget extends LayoutContainer {


public void onRender(Element parent, int index) {
    super.onRender(parent, index);
    setLayout(new VBoxLayout());
    setWidth("100%");

    final FormPanel uploadPhotoPanel = new FormPanel();
    uploadPhotoPanel.setWidth("100%");
    uploadPhotoPanel.setHeight("150px");

    Label label = new Label("Ajouter une photo");
    add(label);

    uploadPhotoPanel.setAction(GWT.getModuleBaseURL()
        + "photoload/uploadpreview.ctz");
    uploadPhotoPanel.setEncoding(FormPanel.ENCODING_MULTIPART);
    uploadPhotoPanel.setMethod(FormPanel.METHOD_POST);


    final FileUploadField file = new FileUploadField();
    file.setName("FILE");
    uploadPhotoPanel.add(file);
    file.addHandler(new ChangeHandler() {
    @Override
    public void onChange(ChangeEvent event) {
        uploadPhotoPanel.submit();

    }
    }, ChangeEvent.getType());

    final Button btn = new Button("Ajouter",
        new SelectionListener<ButtonEvent>() {
        @Override
        public void componentSelected(ButtonEvent ce) {
            uploadPhotoPanel.submit();
        }
        });



    final Image previewimage;

        previewimage = new Image();
        DOM.setElementAttribute(previewimage.getElement(), "id",
            "previewimage");
        previewimage.setSize("200px", "200px");


    previewimage.addLoadHandler(new LoadHandler(){

        protected native void onPreviewLoad() /*-{
                document.getElementById("previewimage").imgAreaSelect({
                    aspectRatio : '1:1',
                    handles : true,
                    fadeSpeed : 200
                });

        }-*/;

        @Override
        public void onLoad(LoadEvent event) {
            onPreviewLoad();
        }});

    uploadPhotoPanel
        .addSubmitCompleteHandler(new SubmitCompleteHandler() {

        @Override
        public void onSubmitComplete(SubmitCompleteEvent event) {
            previewimage.setUrl(GWT.getModuleBaseURL()
                + "photoload/downloadpreview.ctz?tsp="
                + System.currentTimeMillis());
        }
        });

    add(uploadPhotoPanel);
    add(previewimage);
    add(btn);

}

解决方案

Use $wnd.$("#imagepreview") or $wnd.jquery("#imagepreview").

(Updated to fix the forgotten #)

这篇关于GWT客户端裁剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！