Generando una imagen en línea con java gwt

base64 google-contacts (7)

Su cadena codificada con imágenes parece estar equivocada, se ha perdido al incluir el tipo de contenido de la imagen.

http://en.wikipedia.org/wiki/Data_URI_scheme

datos: [] [; charset =] [; base64],

Estoy tratando de escribir una imagen en línea usando Java GWT. La imagen, sin embargo, no se muestra:

Me parece que la razón de esto es que estoy codificando de manera incorrecta con base64, o que el juego de caracteres está equivocado.

Cuando devuelvo el siguiente código de una imagen que encontré en la web, todo funciona (por lo que no es así, mi navegador no puede mostrar imágenes en línea):

<img src="data:unknown;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==">

Aquí es cómo genero mi código de foto. Abro una url y trato de codificar en base64 el resultado:

try { IoProvider.get().makeRequestAsText(url, new ResponseReceivedHandler<String>() { public void onResponseReceived(ResponseReceivedEvent<String> event) { final Response<String> response = event.getResponse(); if (response.getStatusCode() == HTTP_OK){ callback.onSuccess("data:unknown;base64," + Base64.encode(response.getText())); } } }, options); } catch ...

Ese es el codificador base64 que uso: http://snipt.net/tweakt/gwt-base64/

¿Alguna idea, por qué la imagen generada no es válida?

EDITAR:

Reescribí mi código un poco, basado en tus respuestas. Así es como se ve ahora:

IoProvider.get().makeRequest(url, new ResponseReceivedHandler<Object>() { public void onResponseReceived(ResponseReceivedEvent<Object> event) { final Response<Object> response = event.getResponse(); if (response.getStatusCode() == HTTP_OK) { // not working callback.onSuccess("data:image/jpeg;base64," + Base64Utils.toBase64(response.getText().getBytes())); // working image // callback.onSuccess("data:unknown;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="); } } }, options);

El código editado produce el siguiente código:

También intenté convertir el juego de caracteres:

try { callback.onSuccess("data:image/jpeg;base64," + Base64Utils.toBase64(response.getText().getBytes("ISO-8859-1"))); } catch (UnsupportedEncodingException e) { }

Que produce ese código:

¿Cómo puedo pasar la respuesta a un codificador Base64, sin convertirlo a String?

response.getData () es un objeto y me gusta tenerlo como byte [].

¿Estás seguro de que los datos de imagen que recibiste son correctos? Dado que está solicitando la imagen como texto, tal vez GWT procese los datos binarios antes de llamar su devolución de llamada (por ejemplo, escapando de los caracteres no imprimibles).

Aquí hay un poco de código de ejemplo de cuando necesitaba generar un lado del servidor de Captcha como un elemento de disuasión de bots. Parece que sabes lo que estás haciendo, por lo que para ser conciso, estoy dejando de lado la configuración del servlet.

De todos modos hay 2 lugares en los que veo que las cosas van mal.

1) Your response.getText () no es una codificación de imagen correcta. Solo un problema si está cargando desde un DB o usando una herramienta que genera una imagen como una instancia de la clase Java Image.

2) Tienes que establecer un tipo de mimo. data: unknown tiene que ser un tipo mimet válido como data: image / jpeg (Referencia http://www.w3schools.com/media/media_mimeref.asp ) Si no configura un tipo mimet el navegador tiene que adivinar y si adivina incorrectamente que tu imagen no se mostrará.

Sugiero usar un códec establecido con un tipo de mime coincidente (jpeg, gif, png) suponiendo que está cargando desde un byte [] no un archivo, y también sugiero usar sun.misc.BASE64Encoder (). Encode (byte []) ya que puede estar seguro de que funciona según lo previsto.

Lado del cliente

ThecoderslibraryGWT.loginService.capImage( new AsyncCallback<String>() { @Override public void onFailure(Throwable caught) { error.setHTML(caught.getMessage()); } @Override public void onSuccess(String result) { String base64EncodedImage = result; img.setUrl("data:image/jpg;base64," + base64EncodedImage); vp.setVisible(true); } }); Lado del servidor

/** * 64 Bit encoded captcha image */ public String capImage() { byte[] data = null; // the output stream to render the captcha image as jpeg ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream(); try { // get the session id that will identify the generated captcha. //the same id must be used to validate the response, the session id is a good candidate! String captchaId = this.getThreadLocalRequest().getSession().getId(); BufferedImage challenge = CaptchaServiceSingleton.getInstance().getImageChallengeForID(captchaId, this.getThreadLocalRequest().getLocale()); // a jpeg encoder JPEGImageEncoder jpegEncoder = JPEGCodec.createJPEGEncoder(jpegOutputStream); jpegEncoder.encode(challenge); ByteArrayOutputStream os = new ByteArrayOutputStream(); ImageIO.write(challenge, "jpg", os); data= os.toByteArray(); } catch (IllegalArgumentException e) { e.printStackTrace(); throw new IllegalArgumentException("Unable to create validation image."); } catch (CaptchaServiceException e) { e.printStackTrace(); throw new IllegalArgumentException("Unable to create validation image."); } catch (IOException e) { e.printStackTrace(); throw new IllegalArgumentException("Unable to create validation image."); } return new sun.misc.BASE64Encoder().encode(data); }

unknown no es un tipo MIME válido. Su URI de datos debe comenzar con los data:image/png o lo que sea apropiado para que se muestre la imagen. A pesar del tipo MIME incorrecto, la utilidad de file no reconoce los datos decodificados de la primera URL que ha publicado. ¿Qué tipo de archivo se supone que es?

2 razones probables:

1) El código del lado del servidor que lee la imagen y la envía a través de HTTP está jugando con la codificación del formato binario de la imagen antes de ingresar a Base64.encode (response.getText ()). Si tiene acceso al lado del servidor, Base64.encodifique su imagen en el servidor y simplemente páselo:

callback.onSuccess("data:unknown;base64,"+ response.getText()); // response already in Base64

2) Si no tiene acceso al lado del servidor, intente evitar la traducción de cadena de la llamada a response.getText ().

new ResponseReceivedHandler<byte[]>() { public void onResponseReceived(ResponseReceivedEvent<byte[]> event) { final Response<byte[]> response = event.getResponse(); if (response.getStatusCode() == HTTP_OK){ callback.onSuccess("data:unknown;base64," + Base64.encode(**response.getData()**)); } } }, options); } catch ...

por lo que vale, publicaré mi solución para enviar imágenes al servidor. Usó llamadas RPC que he leído que no puedes usar, pero tal vez eso ayude.

//Cliente

public void onModuleLoad() { HTML html = new HTML( "<img src=/"data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 vr4MkhoXe0rZigAAAABJRU5ErkJggg==/" alt=/"Red dot/">"); RootPanel.get().add(html); greetingService.greetServer("", new AsyncCallback<String>() { @Override public void onSuccess(String result) { HTML html = new HTML( "<img src=/"data:image/png;base64, "+ result + "/" alt=/"Window Logo/">"); RootPanel.get().add(html); RootPanel.get().add(new Label(result)); } @Override public void onFailure(Throwable caught) { // TODO Auto-generated method stub } }); }

//servidor

public String greetServer (String input) arroja IllegalArgumentException {

// BASE64Encoder try{FileInputStream img = new FileInputStream( "C://icon_a.png"); ByteArrayBuffer bab = new ByteArrayBuffer(0); int eof = 0; while (eof != -1) { eof = img.read(); bab.append(eof); } String rets = new BASE64Encoder().encode(bab.toByteArray()); return rets; }catch (Exception e) { // TODO: handle exception } return null; }

PD: la imagen es http://www.drweb.de/icons/twitter/pd_twitter_iconset/pd_twitter_iconset/PNG/256/icon_a.png

Jochen,

Hice extensas pruebas con diferentes bibliotecas de codificación Base64:

(gwt-base64) http://snipt.net/tweakt/gwt-base64/
(google) http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/server/Base64Utils.java?r=5962
(apache) http://commons.apache.org/codec/
Navegadores probados: Chrome 14.0.797.0 dev-m, Firefox 5
Imágenes de prueba: jpeg, gif, png

Código de prueba:

public static void main(String [] args) throws IOException { File file = new File("./resources/so.png"); BufferedInputStream bufRead = new BufferedInputStream(new FileInputStream(file)); ByteBuffer buffer = ByteBuffer.allocate(30*1024) ; // x kb byte[] c = new byte[1]; while ((bufRead.read(c))>0) { //1 byte/time to avoid buffer arithmetics buffer.put(c); } byte[] data = new byte[buffer.position()]; buffer.flip(); buffer.get(data); String dataAsSt = new String(data); // transform the data to a string -- encoding error-prone //gwt-base64 //String gwtBase64 = GwtBase64.encode(dataAsSt); //doesn''t work //google base64 impl String googleBase64 = Base64Utils.toBase64(data); //apache base64 codec Base64 base64codec = new Base64(-1); String apacheBase64 = base64codec.encodeToString(data); System.out.println("Google:"+googleBase64); System.out.println("Apache:"+apacheBase64); //System.out.println("GWTb64:"+gwtBase64); }

Conclusiones

(gwt-base64) No funcionó en absoluto. Falló con: java.lang.StringIndexOutOfBoundsException: String index out of range en cada imagen que probé. Tenga en cuenta que comenté el código.
(google) La codificación Base64 que produce no puede ser entendida por el navegador.
(apache) Funciona con este constructor: nuevo Base64 (-1) = sin líneas de corte, sin url-safe.

Punto de crédito : puede hacer que la implementación de google funcione si modifica los últimos 2 caracteres del mapa de caracteres: ''$'', ''_'' en ''+'', ''/''.

Mi conclusión principal es que la biblioteca Base64 que está utilizando actualmente tiene errores. Sugiero que cuando busque implementaciones alternativas, intente conservar el flujo de bytes entre la imagen y el codificador base64 en formato binario (byte []). La cadena podría funcionar si se usa la misma codificación / descodificación, pero es arriesgado si la codificación y la descodificación se realizan en 2 lugares diferentes (como cliente / servidor).

¡Buena suerte!

PD: Prueba este :-)

Editar: investigación adicional

He pasado más tiempo del razonable tratando de encontrar una solución. El contenedor GWT no le permitirá obtener los datos brutos, pero puede usar JSNI para obligar al navegador a obtener los datos binarios:

native String getBinaryResource(String url) /*-{ // ...implemented with JavaScript var req = new XMLHttpRequest(); req.open("GET", url, false); // The last parameter determines whether the request is asynchronous -> this case is sync. req.overrideMimeType(''text/plain; charset=x-user-defined''); req.send(null); if (req.status == 200) { return req.responseText; } else return null }-*/;

Este blog de JS ayudó mucho.
Este recurso es excelente para entender el funcionamiento detrás de la cortina de Javascript: XMLHTTPRequestObject

Me encanta romper una nuez dura, pero he aplicado todo eso y, sin embargo, la codificación base64 no funciona. Todavía hay un problema de codificación entre JS y el envoltorio de Java y no puedo volver a decodificar el String en un byte correcto []. Intenté todas las combinaciones de codificación posibles. Un posible camino a seguir sería basar64 el texto de respuesta.request utilizando una biblioteca de JavaScript nativa y devolver el String a la contraparte java.

Hasta ahora para su pregunta original.

Ahora, mirando algunas ideas alternativas y los requisitos detrás de su pregunta: Durante mi investigación, he visto que Base64 se utiliza muy a menudo en las imágenes en línea del lado del servidor para evitar la sobrecarga HTTP adicional para obtener las imágenes en el cliente. Parece ser una alternativa popular para el CSS en línea también.

En el contexto de esta pregunta, el código está funcionando en el cliente (navegador) y esas razones no se aplican. El uso de la XMLHTTPRequest subyacente para obtener su imagen binaria está creando una solicitud HTTP adicional desde su navegador al servidor. Dado que en el contexto del cliente, obviamente, usted tiene la URL de la imagen (que se transfiere a IoProvider.get().makeRequest(*url*,...) ¿Hay alguna razón por la cual no podemos permitir que el navegador IoProvider.get().makeRequest(*url*,...) el trabajo a través de un actualización dinámica simple si el objeto de imagen:

(Esta podría no ser la mejor muestra de código, pero te da la imagen (perdón por el juego de palabras ;-))

void setImage(String url) { final HTML imageHolder = new HTML(); String imgTag = "<IMG src=''"+url+"'' />''"; imageHolder.setHTML(imgTag); RootPanel.get("imageContainer").add(imageHolder); // imageContainer is a div }

Editar: la nuez está rajada

Finalmente encontré la última pieza faltante del rompecabezas: cómo decodificar correctamente los datos binarios de la cadena de JavaScript. Tenga en cuenta algunas advertencias: no funcionará en IE dado que no son compatibles con el método overrideMimeType en la solicitud XMLHTTP nativa.

native String getBinaryResource(String url) /*-{ var req = new XMLHttpRequest(); req.open("GET", url, false); // The last parameter determines whether the request is asynchronous. req.overrideMimeType(''text/plain; charset=x-user-defined''); req.send(null); if (req.status == 200) { return req.responseText; } else return null }-*/; private void sendRequestBinary() { String url = URL.encode("/Computer_File_030.gif"); String data = getBinaryResource(url); if (data != null) { // The secret sauce: Method to decode the binary data in the response string byte[] binData = new byte[data.length()]; for (int i=0;i<data.length();i++) { binData[i] = (byte)(data.charAt(i) & 0xff); } final HTML imageHolder = new HTML(); String base64=Base64Utils.toBase64(binData); String imgTag = "<IMG src=''data:image/gif;base64,"+base64+"'' />''"; imageHolder.setHTML(imgTag); RootPanel.get("imageContainer").add(imageHolder); errorLabel.setText("Base64:"); } else { errorLabel.setText("Another error :-("); } }