2010-12-29 11 views
18

Estoy trabajando en un sitio web basado en GWT. Ahora estoy atascado sobre cómo debo mostrar las imágenes almacenadas en una base de datos en mi sitio web.GWT - imagen de la base de datos

Básicamente tengo un bytearray en mi base de datos, que obtengo usando hibernate. Ahora debe probablemente crear una etiqueta ... de que los datos, pero no saben cómo

estoy usando GWT en Java y Hibernate

+7

+1 .. porque cada desarrollador de gwt se encontrará con este problema. –

Respuesta

11

Aquí está la solución. Primero, debe codificar la matriz de bytes utilizando com.google.gwt.user.server.Base64Utils.toBase64 (byte []). Pero este método no funciona para IE 7. e IE8 tiene un límite de 32kb. IE9 no tiene este límite.

aquí es el método en el servidor

public String getImageData(){ 
     String base64 = Base64Utils.toBase64(imageByteArray); 
     base64 = "data:image/png;base64,"+base64; 
     return base64; 
} 

Aquí es el método de cliente;

@Override 
public void onSuccess(String imageData) {  
    Image image = new Image(imageData);  
    RootPanel.get("image").add(image); 
} 
+0

Tengo que probarlo.Gracias – Hons

+0

qué significa "imagen" (qué etiqueta es esa) en esta llamada RootPanel.get ("imagen"); y cómo hacer lo mismo en uibinders y despacho de acción. – Bennet

+0

@Bennet 'image' aquí está la identificación de la etiqueta div creada en la página html del proyecto gwt. –

1

Hay Image Widget en GWT. No puede hacerlo desde el lado del cliente, pero puede llamar al RPC para comunicarse con el servidor. Entonces es simple aplicación CRUD. En el servidor se conecta a la base de datos con Hibernate y devolver la imagen al cliente o su URL y en el lado del cliente hacer algo así:

@Override 
public void onSuccess(String imageUrl) { 
    Image image = new Image(imageUrl); 
    RootPanel.get("image").add(image); 
} 

@Override 
public void onFailure(Throwable caught) { 
    Window.alert(caught.getMessage()); 
} 

eso es todo. Happy coding

+0

Está bien, sabía sobre ese widget, pero requiere una URL, que no tengo, ya que es una imagen en un DB – Hons

+0

que debería obtener y guardarlo en el disco (getBLOB) y luego darle su url a la imagen . De lo contrario, creo que no se puede mostrar la imagen que quiero decir sin tener que lidiar con el disco –

+0

> Creo que no se puede mostrar la imagen que quiero decir sin hacerla pasar al disco - Sí, puede mostrar la imagen sin copiarla en el disco. Todo lo que necesita hacer es devolver blob a la interfaz de usuario. – ch4nd4n

4

no sé cómo funciona GWT, aunque puede asignar un servlet/controlador que devuelve resourceStream. Por ejemplo si asigna un "IMAGEVIEWER" servlet que toma parámetro ImageID, solicitud a la imagen que se convertiría en

/imageViewer?imageId=1234 

objeto de hibernación tendría referencia a la mancha, por lo que puede volver. de referencia en la interfaz de usuario sería

<img src="/imageViewer?imageId=1234"/> 

Actualización: Puede no ser capaz de utilizar el modelo, ya que es devolver la imagen, se necesitaría un controlador explícito o servlet que devuelve datos de la secuencia.
En servlet que haría algo como

// get reference to input stream 
InputStream in = hibnerateObject.getImage(); 
// set MIME type etc 
response.setContentType(mimeType); 
OutputStream out = response.getOutputStream(); 
while ((len = in.read(buf)) >= 0) 
out.write(buf, 0, len); 
in.close(); 
out.close(); 
+0

Ese parece ser bastante razonable. En un JSP o PHP "normal" o en cualquier página de inicio, tendría que hacer algo como esto también. ¿O? – Hons

+0

Puede realizar una solicitud desde "navegador", independientemente de la tecnología de visualización/plantilla. Es una simple solicitud HTTP. Debería funcionar Ajax también. – ch4nd4n

+0

Un gran tutorial de balusc sobre el servicio de imágenes a través de servlets: http://balusc.blogspot.com/2007/04/imageservlet.html Este enfoque también funciona con el widget Imagen –

1

He utilizado el mismo enfoque que sugiere Gursel Koca, pero sólo se podía conseguir que funcione utilizando la biblioteca Apache base 64, no (irónicamente) los Base64Utils GWT

String base64 = Base64.encodeBase64String(array); 
base64 = "data:image/"+type+";base64," + base64; 
return base64; 

también tenga en cuenta que si va a actualizar una imagen existente o un marcador de posición de imagen, el método setURL se sobreponen a su hoja de estilo, así que asegúrese de que agarrar primero:

String styleName = profilePicture.getStyleName(); 
profilePicture.setUrl(base64String); 
profilePicture.setStyleName(styleName); 
Cuestiones relacionadas