2009-06-12 15 views
7

¿Hay cualquier tipo de artilugio GWT que me permite:GWT del lado del cliente, recorte de imagen y cambiar el tamaño

  • seleccionar una parte de una imagen y luego recuperar el área de selección?
  • cambiar el tamaño de una imagen y luego darme el tamaño actualizado?

Lo anterior debe reflejarse en el navegador también.

+3

Así que eran capaces de obtener la solución para ello? También estoy buscando la misma función. – Barry

+2

@bhargava: Lo siento, todavía no hay suerte. –

Respuesta

7

Hasta donde yo sé, el código del lado del cliente GWT no puede modificar directamente las imágenes, pero el widget Imagen se puede configurar para mostrar solo una parte de una imagen. Puede hacerlo utilizando el constructorImage(java.lang.String url, int left, int top, int width, int height), donde width y height son las dimensiones del cuadro visible y no la imagen en sí.

Sin embargo, esto no le permite cambiar el tamaño y luego recortar. Para hacer esto, primero puedes cambiar el tamaño de la imagen y ponerla en un panel absoluto para recortarla.

AbsolutePanel testPanel = new AbsolutePanel(); 
Image image = new Image("path/image.jpg"); 
image.setWidth("1000px"); 
testPanel.add(image,-100,-100); 
testPanel.setPixelSize(300,300); 

Disculpe si esto no es exactamente lo que está buscando, pero es la mejor respuesta que tengo.

+3

Esto es parte de lo que me gustaría hacer, pero la selección debe basarse en la acción del usuario, como lo que sucede en, por ejemplo, Photoshop. –

+1

Bueno, si desea que el usuario pueda ingresar valores de recorte en cuadros de texto, puede usar un ChangeHandler para actualizar la posición de la imagen y el tamaño del panel a los valores de los cuadros de texto. Si desea que el usuario pueda arrastrar un cuadro y recortarlo según las dimensiones de ese cuadro, probablemente necesite una biblioteca de arrastrar y soltar. – DLH

3

También puede cargar el tipo de imagen como un lugar de DataResource ImageResource si quieres a escala con setPixelsSize()

por ejemplo,

... 

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

... 

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

Esto funciona muy bien para mí –

2

Here es cómo uso el elemento canvas para reducir las imágenes utilizando HTML5.

+0

Estaba entusiasmado con el uso de HTML5 canvas pero IE8 no es compatible con HTML5 Canvas. – nzaero

1

Gracias ImageResource tienen mismo método getURL() i utilizado funcionó para mí .. probar esto va a funcionar ahora podemos utilizar imágenes de las dos maneras, ya sea como ruta URL o ImageResource ..

Cuestiones relacionadas