Ask Your Question

Display images in an array on a browser

asked 2013-10-23 06:12:16 -0500

anonymous user


updated 2013-10-23 06:12:56 -0500


My application takes 10 images at a set interval and would like to display these images in an array on a web-browser. How would I go about doing that?


edit retag flag offensive close merge delete

4 Answers

Sort by ยป oldest newest most voted

answered 2013-10-23 20:01:13 -0500

updated 2013-10-23 20:01:45 -0500

you can view the frames in a web browser as follows, is an example that captures the frames from the webcam and transmits them to the browser:

    from SimpleCV import *
    import webbrowser 
    from time import *
    import time

    cam = Camera() 
    saida = JpegStreamer("localhost:8880",st=0.1) 

    while True:
        img = cam.getImage().resize(640,480).binarize().invert()
        img.drawText('TESTANDO TRANSMISAO',30,40,color=Color.BLUE,fontsize=60)
edit flag offensive delete link more


Thanks, this is very useful.

TomJ gravatar imageTomJ ( 2013-10-24 07:53:50 -0500 )edit

answered 2014-05-13 03:19:16 -0500

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:

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 ( with the correct mime type and set that as the source of the image.

Actually, I just noticed something in your codezy4s39w:

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 theMV antibody ( IgG) ELISA ... (more)

edit flag offensive delete link more

answered 2014-05-12 23:33:28 -0500

susannamoore gravatar image

updated 2014-05-12 23:37:43 -0500

Try to look at the traffic between your server and your web browser using the browser's debug tools. For example, Firebug, right-click -> Inspect element, etc... I don't think it's possible to simply send the browser the binary data of some image and have it figure out which format it is (without specifying image Format like "image/gif" as the meta-type in the header). And even if it works for some browsers, it definitely won't in all. But let me add something to the answer that you can also do.

Tags: display image, view image

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account.

Add Answer

Question Tools

1 follower


Asked: 2013-10-23 06:12:16 -0500

Seen: 1,468 times

Last updated: May 13 '14