Discussion :

[roberto35000]

Bonjour,

J'essaye (désespérément) d'utiliser une bibliotheque de cropping d'image...bien sûr sans succès:

J'ai une image (preview) que j'insère dynamiquement dans ma page via un widget gwt Image, un identifiant lui est donné "imagepreview",
J'essaye d'appeler une méthode ("imgAreaSelect") d'une librairie javasript de cropping sur cet élément sans succès.

La méthode native onPreviewLoad est utilisé à cet effet (en espérant d'ailleur que le load de la photo soit terminé à l'instant ou elle est appellée, à confirmer/infirmer)
Si j'utilise dans cette méthode jQuery("#previewimage") gwt me dit jQuery inconnu au bataillon, si j'utilise le '$' il me dit $ undefined. Bref impossible d'utiliser la bibliotheque imgareaselect ( http://odyniec.net/projects/imgareaselect/ )
note: les scripts sont présents dans ma page (dans le header).

Besoin d'aide...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
 
    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);
 
}

[JFmil53_2]

Bonjour

Je ne sais pas comment résoudre ton problème avec ta bibliotheque.

Mais, peut etre devrais tu utiliser une librarie comme gwt-g2d:
http://code.google.com/p/gwt-g2d/

Tu crée une surface (canevas qui contient ton image):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
Surface surface = new Surface()
ImageLoader.loadImages("images/monimage.png", new ImageLoader.CallBack() {
	@Override
	public void onImagesLoaded(ImageElement[] imageElements) {
		surface.setBackGround(imageElements[0]);
}

Au lieu du path de l'image tu peu aussi utiliser l'URI (Data URI scheme)

Et tu implémente un mouse listenner sur la surface pour pouvoir la cropper.

CIao