Обрезка на стороне клиента GWT - PullRequest
2 голосов
/ 11 сентября 2011

Я застрял на интеграции gwt с библиотеками JCrop или imgareaselect javascript У меня есть изображение, URL которого меняется каждый раз, когда клиент меняет файл, выбранный из его файловой системы (с помощью виджета загрузки). Я хочу, чтобы пользователь выбрал область в своем изображении, таким образом я смогу получить изображения с соотношением сторон, уважающим пожелания клиента. Проблема в том, что я не могу сделать так, чтобы imgareaselect или jcrop вызывались при событии load, каждый раз, когда у меня нулевое значение, если я пробую jquery ("imagepreview"), jquery будет неизвестен во время выполнения, если я попробую $ ("# imagepreview") я получаю $ не определено ...

ПОЖАЛУЙСТА, помогите ... Привет.

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

}

1 Ответ

2 голосов
/ 11 сентября 2011

Используйте $wnd.$("#imagepreview") или $wnd.jquery("#imagepreview").

(Обновлено, чтобы исправить забытые #)

...