GWT客戶端側面裁剪

我被困在集成gwt與JCrop或imgareaselect JavaScript庫我有一個圖像，每當客戶端更改從其文件系統（使用上傳控件）選擇的文件時，URL正在改變。我希望用戶在其圖像中選擇區域，這樣我就能夠讓圖像的寬高比尊重尊重客戶的意願。問題是我不能成功imgareaselect或jcrop調用加載事件，每次我有空，如果我嘗試jQuery（「imagepreview」）jquery是未知的執行時間，如果我嘗試一些$（「＃imagepreview」）我得到一個$是未定義的...GWT客戶端側面裁剪

請幫助... 關心。

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

}

來源

2011-09-10 roberto35000

使用$wnd.$("#imagepreview")或$wnd.jquery("#imagepreview")。

（更新來修復被遺忘#）

來源

2011-09-11 08:19:52

謝謝，但： '致：com.google.gwt.core.client.JavaScriptException：（類型錯誤）：$ wnd.jquery不是一個函數' 和「導致：com.google.gwt.core.client.JavaScriptException：（TypeError）：$ wnd。$（" previewimage "）.imgAreaSelect不是一個函數' ' – roberto35000

好吧，因爲我有imgAreaSelect不是一個函數我把腳本頭部放在主html頁面的模塊腳本之前，現在我沒有任何錯誤，但是沒有發生:-(我相信該方法被調用，因爲我在該函數中放置了一個警告彈出窗口，但沒有發生... – roberto35000

最後news $ wnd。$（'＃imagepreview'）是fuctionnal，非常感謝!!!! – roberto35000

GWT客戶端側面裁剪

回答

相關問題