Generating an inline-image with java gwt

Question

I'm trying to write an inline-image using Java GWT. The image however does not display:

<img src="data:unknown;base64,Pz9QAQSkZJRgABAQAAAQABAA9Q9AAUDBAcJCggFBQkGCAYGBggFBQUFCAgGBQYGBwUHBwUGBgUHChALBwgaCQUFDBUMDhERHxMfBxciGBYSGBAeEx4BBQUFCAcIDwgJCBIIDA4SEhISEhISEh4SEhIeEhIeHhISEh4eEhIeHh4SHh4eEhISEhISHh4eEhIeEh4eEhISHfz9ABEIAGAAYAMBIgACEQEDEQD9QAcAAACAQUBAAAAAAAAAAAAAAAAAQcCAwQGCAT9QAvEAACAQIEBAMHBQAAAAAAAAAAAQIDEQQFEiEGBzFBE1FyIjJhYnD9RRSPz9P0AGwEBAAIDAQEAAAAAAAAAAAAAAAECBAUHBgL9QAgEQEAAgEFAAMBAAAAAAAAAAAAAQIDBAUREiETMmExP0ADAMBAAIRAxEAPw9M0zKv1jbfz9bP0SUlJdkZtD0RV4JeRluEP0jP0tP0URVGNiorZSf9R9MP0dT0aVH9RznWgcfz9M379RET9Pz9GXo/EzNuW1FYUv9SXN1Wfz9Dj8/UpcHP05RjsQVM2S9XPz9Rf9Vb9Pz9SxxVL9JpDcWoNRzxuXYQXAYmFwAZV79WNiOfz9JX4vZEY8XoyPz9EnR6Lvz9X8PPz9My9vVv9P00c0lyRl8dOz9Ogr9P1GP0RBcG4YS79P07MF9dv09P1fRxwWk6R0hpLPz9XP1/Ux80cv1bf0CPz9OxH9UFwAP1qR3H9TP0CJg/Ffz9Pz9TlYVSkpxS39WL9S0T9a04cm8cZX4NSU39P0XEv0+1r9TPz9Pz9P1TTw9aEpWTv06Nfz9VP07NFn9cM3fF1eP1GAzRzP0hL0wSX9X04Jg5aZSL9P1rWr9Yv1fEi5ZOv1zMf0ND2UjJfz9Pz9HnZ9VoqFPymIPz9af1yD2QOIWJGP1ZQf1NXdmQBxXP0SUfz9P11aP0tMjv9SUpP1/Rf1BP1NTD9Yz9Pz9TT9X9HvX9XSwiT1sQT9NTT9W0zbv0mXv06P0ZP1RSfz9Rb9f0ADExgVQYAABcBDQ9cTH9Fgb9Sy79YzsPS0l8GE8gQAEAYCAYAAAAAAAAAPz9">

It seams to me that the reason for this is, that I'm encoding it the wrong way with base64, or that the charset is wrong.

For when returning the following code of a pic I found on the web, everything works (so its not, that my browser can't display inline-images):

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

Here is how I generate my pic-code. I open an url and try to base64-encode the result:

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 ...

Thats the base64 encoder I use: http://snipt.net/tweakt/gwt-base64/

Any ideas, why the generated image is not valid?

EDIT:

I rewrote my code a little, based on your answers. Here is how it looks like now:

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

The edited code produces the following code:

<img src="data:image/jpeg;base64,77+977+977+977+9ABBKRklGAAEBAAABAAEAAO+/ve+/vQDvv70ABQMEBwkKCAUFCQYIBgYGCAUFBQUICAYFBgYHBQcHBQYGBQcKEAsHCBoJBQUMFQwOEREfEx8HFyIYFhIYEB4THgEFBQUIBwgPCAkIEggMDhISEhISEhISHhISEh4SEh4eEhISHh4SEh4eHhIeHh4SEhISEhIeHh4SEh4SHh4SEhIe77+977+9ABEIAGAAYAMBIgACEQEDEQHvv73vv70AHAAAAgEFAQAAAAAAAAAAAAAAAAEHAgMEBggF77+977+9AC8QAAIBAgQEAwcFAAAAAAAAAAABAgMRBAUSIQYHMUETUXIiMmFice+/ve+/vRRS77+977+977+977+977+9ABsBAQACAwEBAAAAAAAAAAAAAAABAgQFBwYD77+977+9ACARAQACAQUAAwEAAAAAAAAAAAABAgMEBRESIRMyYTHvv73vv70ADAMBAAIRAxEAPwDvv70w77+9Myvvv71jbu+/ve+/vcWt77+9Eu+/vUlJdkZtDO+/vRHvv71eyIl5GW4R77+9I++/ve+/vS3vv73vv70U77+9FUY2KitlKO+/ve+/vRDvv70x77+9HUzvv70a77+9Uu+/vUTvv73Hp++/vWgc4a+m77+977+9M3/vv71ERe+/ve+/ve+/ve+/vRl6PxMzbu+/vW1FYUzvv71Jc3Va77+977+9Dj8/77+9Slwd77+9OUY7EO+/vVM277+9L1fvv73vv73vv73vv70Y77+977+9V++/ve+/ve+/ve+/ve+/vSxx77+9U++/ve+/vdKaQ3FqDUc8bu+/vXYQXAYmFwAZ77+9X++/ve+/vWNiOu+/ve+/vSV+L2RGPO+/vXoy77+977+977+9EnR6L++/ve+/ve+/vX8P77+977+977+9My9v77+9XO+/ve+/ve+/vTRzSXJGXx0477+977+9Ogvvv73vv73vv71GP0RB1bBuGO+/vS/vv73vv73vv707MFDvv71377+9Pe+/ve+/vV/vv70ccO+/vWnnrLpHSGkt77+977+9Xe+/vX9THzRz77+9W86y77+9Au+/ve+/ve+/vTsS77+977+9QXAB77+9akdy77+9Te+/vQLvv73GmD8W77+977+977+977+977+9TlYVSkpx77+9Lu+/ve+/vWPvv71LRe+/vWjvv704cm8cZX4NSU7vv73vv73vv70XE++/vT7Oq1vvv71N77+977+977+977+977+977+977+9U++/vTw9aEpWT++/vTo277+977+9Ve+/vTs0Wu+/vXHPjtufFO+/vV7vv73vv71GAzRz77+977+9ISzvv70w77+9Ju+/vVzvv704Jg5aZSPvv73vv73vv71ry6Fr77+9Y++/vV8SLlk777+9czLvv70ND2UjJu+/ve+/ve+/ve+/ve+/vR52fe+/vVoqFe+/vcKmIe+/ve+/vWrvv71yD2QOIWJG77+977+9WULvv71N77+9d2ZAHFfvv73vv70SUu+/ve+/ve+/ve+/vXVp77+9LTI877+977+9JSnvv73vv71/Ru+/vUHvv73vv71N77+9Me+/vWDvv73vv73vv73vv73vv73vv70177+977+9cO+/vR/Dtu+/vV0sIu+/vT1s77+9Be+/vTU177+9WO+/vTNv77+9Jl/vv70677+977+9Ge+/ve+/vVFK77+977+977+9F++/vXzvv70ADExgVQYAABcBDQDvv71xMu+/vRYH77+9Sy/vv71jOw9LSXwYTyBAAQBgIBgAAAAAAAAB77+977+9">

I also tried converting the charset:

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

Which produces that code:

<img src="data:image/jpeg;base64,/f39/QAQSkZJRgABAQAAAQABAAD9/QD9AAUDBAcJCggFBQkGCAYGBggFBQUFCAgGBQYGBwUHBwUGBgUHChALBwgaCQUFDBUMDhERHxMfBxciGBYSGBAeEx4BBQUFCAcIDwgJCBIIDA4SEhISEhISEh4SEhIeEhIeHhISEh4eEhIeHh4SHh4eEhISEhISHh4eEhIeEh4eEhISHv39ABEIAGAAYAMBIgACEQEDEQH9/QAcAAACAQUBAAAAAAAAAAAAAAAAAQcCAwQGCAX9/QAvEAACAQIEBAMHBQAAAAAAAAAAAQIDEQQFEiEGBzFBE1FyIjJhYnH9/RRS/f39/f0AGwEBAAIDAQEAAAAAAAAAAAAAAAECBAUHBgP9/QAgEQEAAgEFAAMBAAAAAAAAAAAAAQIDBAUREiETMmEx/f0ADAMBAAIRAxEAPwD9MP0zK/1jbv39bf0S/UlJdkZtDP0R/V4JeRluEf0j/f0t/f0U/RVGNiorZSj9/RD9Mf0dTP0a/VL9RP3n/Wgc5v39M3/9REX9/f39GXo/EzNu/W1FYUz9SXN1Wv39Dj8//UpcHf05RjsQ/VM2/S9X/f39/Rj9/Vf9/f39/Sxx/VP9/ZpDcWoNRzxu/XYQXAYmFwAZ/V/9/WNiOv39JX4vZEY8/Xoy/f39EnR6L/39/X8P/f39My9v/Vz9/f00c0lyRl8dOP39Ogv9/f1GP0RBcG4Y/S/9/f07MFD9d/09/f1f/Rxw/Wk6R0hpLf39Xf1/Ux80c/1bsv0C/f39OxL9/UFwAf1qR3L9Tf0C/Zg/Fv39/f39TlYVSkpx/S79/WP9S0X9aP04cm8cZX4NSU79/f0XE/0+q1v9Tf39/f39/f1T/Tw9aEpWT/06Nv39Vf07NFr9cc7fFP1e/f1GAzRz/f0hLP0w/Sb9XP04Jg5aZSP9/f1r4Wv9Y/1fEi5ZO/1zMv0ND2UjJv39/f39HnZ9/VoqFf2mIf39av1yD2QOIWJG/f1ZQv1N/XdmQBxX/f0SUv39/f11af0tMjz9/SUp/f1/Rv1B/f1N/TH9YP39/f39/TX9/XD9H/b9XSwi/T1s/QX9NTX9WP0zb/0mX/06/f0Z/f1RSv39/Rf9fP0ADExgVQYAABcBDQD9cTL9Fgf9Sy/9YzsPS0l8GE8gQAEAYCAYAAAAAAAAAf39">

How can I pass response to an Base64 encoder, without converting it to String?

response.getData() is an object and I like to have it as byte[].

Castera

I've been around this and now trying some alternative ideas: If the client has the URL of the image, is there a reason for embedding it using the base64 encoding instead of dynamically updating the url of an image object? – Felizio

Linking the image directly will result in 403 Authorization Required, for the browser will not send OAuth authentication headers. I'll set them however in the JavaScript request. – Castera

Answer 1

Jochen,

I've done extensive tests with different Base64 encoding libraries:

• (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/

• Tested browsers: Chrome 14.0.797.0 dev-m, Firefox 5

• Test images: jpeg, gif, png

Test code:

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

Conclusions:

• (gwt-base64) Didn't work at all. It failed with: java.lang.StringIndexOutOfBoundsException: String index out of range on every image I tried. Note that I commented out the code.

• (google) The Base64 encoding it produces cannot be understood by the browser.

• (apache) Works with this constructor: new Base64(-1) = no breaklines, no url-safe.

Credit point: You can make the google implementation work if you modify the last 2 character of the character map: '$', '_' into '+', '/'.

My main conclusion is that the Base64 library you are currently using is buggy. I suggest that when you look for alternative implementations, try to preserve the byte flow between the image and the base64 encoder in binary format (byte[]). String might work if the same encoding/decoding is used but is risky if the encoding and the decoding are done in 2 different places (like client/server).

Good luck!

PS: Try this one :-)

<img src="data:unknown;base64,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"/>

Edit: Further research

I've spent more time than reasonable trying to find a solution. The GWT wrapper will not let you get the raw data, but you can use JSNI to force the browser to get the binary data:

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
}-*/;

• This JS Blog helped a lot.
• This resource is excellent to understand the workings behind the Javascript curtain: XMLHTTPRequestObject

Love to crack a hard nut, but I've applied all that and yet, the base64 encoding is not working. There's still an encoding issue between the JS and the Java wrapper and I can't get the String decoded back into a correct byte[]. Tried all the possible encoding combinations. A possible way to go would be to base64 the req.responseText using a native javascript library and return the String to the java counterpart.

So far for your original question.

Now, looking at some alternative ideas and the requirements behind your question: During my research, I've seen that Base64 is very often used to inline images at the server side to avoid the extra HTTP overhead to get the images at the client. It seems to be a popular alternative for CSS inlining as well.

In the context of this question, the code is working on the client (browser) and those reasons don't apply. Using the underlying XMLHTTPRequest to get your image binary is creating an additional HTTP request from your browser to the server. Given that in the client context you obviously have the URL of the image (being passed to IoProvider.get().makeRequest(*url*,...) is there a reason why we could not let the browser to the job through a simple dynamic update if the image object:

(this might not be the best code sample, but it gives you the picture (sorry for the pun ;-) )

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
}

Edit:The nut is cracked

Finally found the last missing piece of the puzzle: How to correctly decode the binary data from the JavaScript string. Note some caveats: Won't work on IE given that they don't support the overrideMimeType method on the native XMLHTTPRequest.

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 :-(");
    }
}

Felizio

Thanks for your research. But I can get neither Base64Utils nor apacheBase64 to work with client side GWT. [ERROR] Line 317: No source code is available for type com.google.gwt.user.server.Base64Utils; did you forget to inherit a required module? - And if I include it in my .gwt.xml file, it wont works as well. This answers states, that it can only be used server side #4741365 – Castera

@Castera the code of google impl of Base64 seems pretty clean to me to be translatable by the GWT js compiler. Could you just add the src code in your build? It's a while since I've done GWT. I think it should be possible. – Felizio

Good idea. I can use Base64Utils.toBase64() now and have rewritten $ and _ to + and /. However the image still does not display. I've edited my question and put the new output there. I also tried changing the encoding. I think the Base64 encoder is fine, since you already checked it. The issue seams to be, that I can not get access byte[] as it is in the original image. Since response.getText() seams to destroy it. – Castera

@Castera I cracked the nut! I'll post details later on! – Felizio

You found a solution? Regarding your last edit: Its not possible to just exchange the image src, for the image would return 403 Authorization required, since no OAuth HTTP-headers were send. To have access to the file theese headers need to be sent. GWT generates them for me, thats why I'm stuck with fetching the image via GWTs generated JavaScript and then trying to send it to the browser. Latency is not an issue for me. If JS could save the image somewhere, where the browser can access it, that would be fine with me. But afaik JS can not store files, so I'll have to use inline images. – Castera

@Castera After reading this: "thats why I'm stuck with fetching the image via GWTs generated JavaScript" you might still not have a full solution. I did not find a GWT-based solution to get the binary stream. Only JSNI would do the trick, but then you have the OAuth headers thing... maybe you can play between JSNI and GWT to get the best of both worlds. – Felizio

Gonna try that on Monday. Maybe I could extend the JS so it will send OAuth information. Thanks for all your efford! Helped me lots! – Castera

No prob. Learned a lot in the process. – Felizio

this answer just saved my ass, Base64 encoder port with GWT is not working and i spend almost four hours , the used codec from apache ..and work as magic , i think there is some RFC issue – Superiority

Answer 2

Your image encoded String seems to be wrong, you have missed including the image content type.

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

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

Pinfold

You mean the charset= parameter? I tried data:unknown;charset=utf-8;base64, and it did not work. – Castera

Answer 3

Are you sure that the image data you received are correct? Since you are requesting the image as text, maybe GWT process the binary data before calling your callback (e.g escaping the non printable chars).

Undershorts

Yes, I created the <img ... with GWT. I put it inside callback.onSuccess("data:unknown;base64,workingbase64imagecode); – Castera

Answer 4

unknown is not a valid MIME type. Your data URI should start with data:image/png or whatever is appropriate for the image to be displayed. Incorrect MIME type notwithstanding, the file utility does not recognize the decoded data from the first URL that you have posted. What kind of file is it supposed to be?

Tripitaka

While its not a valid mimetype most browsers are smart enough to look at file markers and figure out the mimetype so most likely the encoding is incorrect. – Albinaalbinism

I tired image/jpg image/png and image/gif. None of them worked. I don't think it is needed, since the picture working has "unknown" as well. – Castera

Answer 5

Here's a bit of example code from when I needed to generate a Captcha server side as a bot deterrent. You seem to know what you are doing so for the sake of being concise I'm leaving out the servlet setup.

Anyways there are 2 places I see things going wrong.

1) Your response.getText() is not a correct image encoding. Only an issue if you're loading from a DB or using using a tool that generates an image as an instance of the Java Image class.

2) You have to set a mime type. data:unknown has to be a valid mimetype such as data:image/jpeg (Reference http://www.w3schools.com/media/media_mimeref.asp) If you don't set a mimetype the browser has to guess and if it guesses incorrectly you're image wont show.

I suggest using an established codec with a matching mime type (jpeg, gif, png) assuming you are loading from a byte[] not a file, and I also suggest using sun.misc.BASE64Encoder().encode(byte[]) since you can be sure it works as intended.

Client Side

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

---

Server Side

/**
 * 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);
}

Albinaalbinism

I forgot to mention that my code is client side only. The server side is google contacts. I'm retrieving a picture from there. I read it with GWT generated javascript. I can not link the picture URL directly, sinct that would cause 403 Auth required. The javascript sends OAuth headers, when requesting the file, which returns the image data to me. Since Javascript can not write files, I then need to pass the image code as an inline-image. – Castera

sun.misc.BASE64Encoder seams to work server side only. Using image/jpeg did not help. I guess, the problem is with the String conversion, or the Base64 encoding. But I already tried two different Base64encoding classes. – Castera

Answer 6

2 probable reasons:

1) Your server-side code reading the image and sending it through HTTP is messing with the encoding of the binary format of the image before entering to Base64.encode(response.getText()). If you've access to the server-side, Base64.encode your image on the server and just pass it through:

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

2) If you don't have access to the server side, try avoiding the String translation of the response.getText() call.

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 ...

Felizio

Unfortunalety I don't have access to the server. Its a google contacts picture, I'm trying to access. To request the URL containing the picture I have to send OAuth headers (which works). Since my code runs client side only, I need to use inline-images (JavaScript can't store files). – Castera

How can I avoid the string translation? Afaik there is onyl IoProvider.get().makeRequestAsText() and no IoProvider.get().makeRequestAsByte – Castera

@Castera have you tried: public void makeRequest(final String url, final ResponseReceivedHandler<Object> handler); Check afterwards the type of the Object from the Response<Object> response = event.getResponse(); I've the strong impression that is the internal encoding process of converting the image stream to a String in the getText() method that is messing with the content. – Felizio

the javadoc for the makeRequestAsText(...) method says: This method can be used for fetching any text data. – Felizio

Your choice of impl for the Base64 encoding is also a potential suspect. It takes a String as input, whereas it should take a byte[] in order to avoid assumptions on character encoding. I found this server-side version. You might be able to include it at the client side as well: goo.gl/yhM8u – Felizio

makeRequest() does not accept byte[] neither. The only alternatives are makeRequestAsDOM and makeRequestAsJSO. I guess I'll have to implement a similar makeRequestAsByte(). I was hoping to make use of the existing ones, since requests are a little difficult from within gmail gadgets, where my application is running. – Castera

I already tried the Base64Utils you linked, but they run server side only. But I also think that getting the URLs content as byte[] instead of String is the first issue I need to fix. Though I don't know how to write a makeRequestAsByte, yet. – Castera

@Castera I'm doing some tests with Base64 libraries. Hold on for a little while. I'll share some additional info. – Felizio

I tried makeRequest() again and it does work, though I still have to convert it to String (see EDIT secion in my question). Any ideas, how to get the response without converting it to String? – Castera

Answer 7

for what its worth I'll post my solution for an sending images to the server. It used RPC calls which I have read you cant use, but maybe it helps.

//Client

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

        }
    });
}

//server

public String greetServer(String input) throws 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;
}

PS: the image is http://www.drweb.de/icons/twitter/pd_twitter_iconset/pd_twitter_iconset/PNG/256/icon_a.png

Perl