Display image with base64 String in html?

Question

here is my java code that construct the base64 String from image. Then place the base64 String html, to view the constructed image, but image is not constructed somehow

public void getBase64String() throws FileNotFoundException {
    FileInputStream itStrm = new FileInputStream(
    "E:\\image\\56255254-flower.jpg");//image is lying at http://danny.oz.au/travel/mongolia/p/56255254-flower.jpg
    String str = itStrm.toString();
    byte[] b3 = str.getBytes();
    String base64String = new sun.misc.BASE64Encoder().encode(b3);
    //output of base64String is amF2YS5pby5GaWxlSW5wdXRTdHJlYW1AMTdlMDYwMA==
  }

Now in html page i placed the output of base64String in img tag to view the image.But image does not shows up (instead it display the cross image icon). I am not getting image is not displayed from base64 String below?

      <HTML>
      <BODY>
           <img    src="data:image/jpeg;base64,amF2YS5pby5GaWxlSW5wdXRTdHJlYW1AMTdlMDYwMA=="/>

     </BODY>
     </HTML>

EDIT:- Thanks Folks, i used byte[] bytes = IOUtils.toByteArray(is);. It worked for me!!

I got a wall of text. The base64 representation should take up more space than the actual image. — Blender, Oct 23 '12 at 05:53
Also you might be better off using apache commons library.http://commons.apache.org/codec/apidocs/org/apache/commons/codec/binary/Base64.html — specialscope, Oct 23 '12 at 06:01
`String base64String = new sun.misc.BASE64Encoder().encode(b3);` Look to [`DatatypeConverter`](http://docs.oracle.com/javase/7/docs/api/javax/xml/bind/DatatypeConverter.html) in a more modern JRE, and the [methods](http://docs.oracle.com/javase/7/docs/api/javax/xml/bind/DatatypeConverter.html#method_summary) centered around `Base64`. — Andrew Thompson, Oct 23 '12 at 06:02

score 8 · Accepted Answer · edited May 23 '17 at 11:56

8

This: String str = itStrm.toString() is not the image but the toString() representation of the FileInputStream instance.

You'll have to read the bytes from the stream and store them in a byte array. And, for performance reasons, buffer the stream:

BufferedInputStream itStrm = new BufferedInputStream(FileInputStream(
    "E:\\image\\56255254-flower.jpg"));

Further reading (Spoiler: solution inside)

Convert InputStream to byte array in Java

edited May 23 '17 at 11:56

Community

1
1

answered Oct 23 '12 at 05:52

Andreas Dolk

113,398
19
180
268

Thanks Andreas. I used byte[] bytes = IOUtils.toByteArray(is); it worked for me. I have one more related question. I need to send the image with email body which can be sent to no email server like gmail,yahoo etc. I was planning to convert it to base64string first and then make the image tag out of it and store it with body. Now wherever the email body goes, base64 string will be displayed as image.To me it looks good solution. But i am not sure is there any downside of it? – M Sach Oct 23 '12 at 06:07
1

Good to hear that it works now. Please make a new post for the other question :) – Andreas Dolk Oct 23 '12 at 06:12

score 0 · Answer 2 · answered Oct 23 '12 at 05:55

You would need to use the read() method of the FileInputStream instance instead of the toString() to get the content of the image. Then you are able to encode it and should work as you expected.

Something like:

int c;
StringBuffer result = new StringBuffer("");
while((c = fileInputStream.read()) != -1)
{
    result .append((char)c);
}

Display image with base64 String in html?

2 Answers2