CODEWITHSUNDEEP
javaimageserversocket
Gravity123
Gravity123

Reputation: 1130

Displaying image from byte array in browser

I have a simple TCP serversocket that will GET a byte array. This GET comes from when entering a website on this server that contains an img src link to a gif image, the requests looks like this:

GET /myHome.htm HTTP/1.1
GET /house.gif HTTP/1.1

Now the byte array is done like this:

byte[] fileByte = Files.readAllBytes(filePath);

To print the website which contains this image I do this:

out.writeBytes(new String(fileByte));

out:

DataOutputStream out= new DataOutputStream(socketClient.getOutputStream());

Now to make the image display I think I have to use something else then

out.writeBytes()

but I do not know for sure. Anybody knows how to make the image display? Right now the image just dont show at all.

Upvotes: 3

Views: 7348

Answers (1)

Markus A.
Markus A.

Reputation: 12742

First, make sure your GIF file is not corrupted. (Happened to me before, too).

If that is the case, try this code for sending the GIF file:

byte[] fileByte = Files.readAllBytes(filePath);
writer.writeBytes("HTTP/1.1 200 OK\r\n");
writer.writeBytes("Content-Type: image/gif\r\n");
writer.writeBytes("Content-Length: "+fileByte.length+"\r\n");
writer.writeBytes("\r\n");
writer.write(fileByte, 0, fileByte.length);

And then try to navigate to "house.gif" directly instead of "myHome.htm". Let me know in the comments what this does.

Previous answer attempts:

I think I may have misunderstood your question. Let me try with a different answer:

You are not sure how to figure out on the server when to return the HTML file myHome.htm and when to return house.gif?

I think for this you need to simply parse out the requested URL. Just check whether it contains "house.gif" or not. Then, depending on this, you either return the HTML file as you described above, or you send the .gif file, making sure that you use 

writer.write(fileByte, 0, fileByte.length);

to send the binary data and that you set a reply header of 

Content-Type: image/gif

In both cases (for the HTML file and the GIF file), though, you should prepend the data you are sending with correct HTTP response headers. Don't take the page-title the wrong way, but this site might help: http://net.tutsplus.com/tutorials/other/http-headers-for-dummies/

And just to make sure: Your server will be receiving TWO independent requests. The first one will ask for the HTML file, the second one will ask for the GIF file. So you send either one or the other. So, there's no "special way" to send the GIF instead of the HTML file. You use the same clientSocket. But it's a different connection.

Previous answer(s):

I think you might be missing the mime-type of your returned data. Try adding the following HTTP header to your reply:

Content-Type: image/gif

Actually... Are you sending a correct HTTP reply at all (including headers, specifically Content-Length)? If not, shoot me a comment and I'll post the code that you need for this.

If, for some reason, you cannot set the content-type header to let the browser know that you are sending it an image, you might be able to load the binary data on the client with an XMLHttpRequest into a JavaScript function rather than specifying it as the source Url of an img tag. Then you can use JavaScript to encode the binary data into a dataURI (http://en.wikipedia.org/wiki/Data_URI_scheme) with the correct mime type and set that as the source of the image.

Actually, I just noticed something in your code:

new String(fileByte)

might interpret the fileBytes as unicode characters rather than binary. Then, when you write this to the writer, it might screw it up as probably not all data in the image are valid unicode. Try replacing the line with this:

writer.write(fileByte, 0, fileByte.length);

Maybe this is all you need to do to fix it???

Upvotes: 3

Related Questions