# Display images in an array on a browser

Hi,

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?

Thanks

edit retag close merge delete

Sort by » oldest newest most voted

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)
time.sleep(1)
webbrowser.open("http:localhost:8880")

while True:
img = cam.getImage().resize(640,480).binarize().invert()
img.drawText('TESTANDO TRANSMISAO',30,40,color=Color.BLUE,fontsize=60)
img.save(saida)
time.sleep(0.1)

more

Thanks, this is very useful.

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

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.

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.

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/DataURIscheme) 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

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

more