Convert base64 byte array to an image

Question

I have a form bean with attributes id, desc and imageByteArray. Struts action gets executed and it redirects to a JSP where i want to access these bean attributes like id, desc and convert the imageByteArray and display it as an image. I tried this post, but that's not working for me.

I encode the bytearray using Base64 - where this.bean.imageByteArray refers to the form bean

this.bean.setImageByteArray(new org.apache.commons.codec.binary.Base64().encode(imageInByteArr));

I tried this, but not working

<img src="data:image/jpg;base64,<c:out value='${bean.imageByteArray}'/>" />

Byte array (byte[] imageByteArray) refers a base64 encoded JPG image and I'm getting the following img tag as output and obviously nothing gets displayed,

<img src="data:image/jpg;base64,[B@2e200e">

Any idea how to convert base64 byte array and display as an image in JSP?

Please teill use what 'but not working' exactly means. How did the output look like? What is the type of `imageByteArray`? I guess you have to call `encodeString`... — home, May 09 '12 at 05:50
For ones who need to display a real (non-base64-encoded) byte array as image, head to a.o. http://stackoverflow.com/q/2340406 — BalusC, Aug 06 '15 at 07:24

score 12 · Accepted Answer · answered May 09 '12 at 06:08

12

What you get is just the toString output of an array. You need however the byte array converted to a String.

You should create a method in bean


public String getByteArrayString()
{
   return new String(this.imageByteArray);
}

and reference this in your JSP.

While technically you should define which encoding to use for an array of base64 bytes this is not necessary as all characters are in the standard 7bit ASCII range.

answered May 09 '12 at 06:08

DoubleMalt

1,263
12
17

Excellent. It works. I checked lot of SO posts related to this type of question but I couldn't see any correct answer. You saved my time. Thanks. – SyAu May 09 '12 at 06:21
I've only just seen this answer, but it's almost certainly *not* the right thing to do here. It's basically putting two bad ideas on top of each other. The OP is performing base64 encoding already - so should be saving that as a *string* inside their object, not as a byte array. Alternatively, they should not base64-encode the data until they output it. Basically the right conversion is `byte[]` to base64-encoded string - not "`byte[] to base64-encoded-then-ASCII-encoded byte[], then byte[] to string". – Jon Skeet Aug 06 '15 at 06:23
Additionally, your comment about encodings at the end is incorrect - this will use the platform default encoding... what if that's UTF-16? Or EBCDIC? Or something else that isn't ASCII-compatible? – Jon Skeet Aug 06 '15 at 06:26
@DoubleMalt "reference this in your JSP" please how i do this in my jsp page but it not working for me. i have some think like that – Ait Friha Zaid May 26 '18 at 06:21

score 3 · Answer 2 · edited Aug 06 '15 at 07:24

DoubleMalt's answer (accepted at the time of writing) is unfortunate, because it's sort of using two wrongs to make a right. It doesn't help that Apache Commons Codec makes it so easy to do the wrong thing :(

Base64 is fundamentally an encoding from binary data to text - as such, it should almost always be used to convert a byte[] to a String. Your issue is that you're converting a byte[] to another byte[] - but you later want to use that data as a string. It would be better to convert once, in the right way.

Now you can choose exactly when you convert to base64 (and a string). You could do it early, in your Java code, in which case I'd use:

// Obviously you'd need to introduce a new method for this, replacing
// setImageByteArray
this.bean.setImageBase64(new Base64().encodeToString(imageInByteArr));

<img src="data:image/jpg;base64,<c:out value='${bean.imageBase64}'/>" />

Alternatively, you could keep just the binary data in your bean, and the perform the encoding in the JSP. It's been a long time since I've written any JSPs, so I'm not going to try to write the code for that here.

But basically, you need to decide whether your bean should keep the original binary data as a byte[], or the base64-encoded data as a String. Anything else is misleading, IMO.

Convert base64 byte array to an image

2 Answers2

Linked