jsp images (img) and binary data (png)

[grasp06110]

Hi Everybody,

Looking into this topic I have found many ways of dynamically setting
the src attribute of an image tag to retrieve binary data from a data
source for an image.

I have not been able to find a way that does not require a round trip
to the server for each image. Is it possible to avoid this?

For example, I have data for 1000 images in a database I would like to
sent to a client upon request. Since I have all of the data in hand I
would like to send it all as part of the same response and have each
of the images rendered on the client (as well as a bunch of other HTML
of course) with out the client needing to ask for each image
individually. I would think that this would represent a substantial
performance improvement as the conversation would go something like:

client: may I have everything I need to render that page that has 1000
images in it?
server: here's all the data for everything, have fun

instead of:

client: may I have that page with 1000 images in it.
server: here's the html
client: may I have the data for the first image?
server: here's the data for image 1
client: how about image 2?
server: here ya go
client: and image 3?
server: here ya go
client: and image 4?
server here ya go
....

As usual, any help would be greatly appreciated.

Thanks,
John

 

[Nigel Wade]

Hi Everybody,

Looking into this topic I have found many ways of dynamically setting
the src attribute of an image tag to retrieve binary data from a data
source for an image.

I have not been able to find a way that does not require a round trip
to the server for each image. Is it possible to avoid this?

For example, I have data for 1000 images in a database I would like to
sent to a client upon request. Since I have all of the data in hand I
would like to send it all as part of the same response and have each
of the images rendered on the client (as well as a bunch of other HTML
of course) with out the client needing to ask for each image
individually. I would think that this would represent a substantial
performance improvement as the conversation would go something like:

client: may I have everything I need to render that page that has 1000
images in it?
server: here's all the data for everything, have fun

instead of:

client: may I have that page with 1000 images in it.
server: here's the html
client: may I have the data for the first image?
server: here's the data for image 1
client: how about image 2?
server: here ya go
client: and image 3?
server: here ya go
client: and image 4?
server here ya go
...

As usual, any help would be greatly appreciated.

Thanks,
John

Zip up the images, and send the zip file. In the client, read the images from
the zip.

That's what I do for displaying a 24hr "movie" of ionosonde data, with one image
every 5 minutes. The client (an applet in this case) requests the images via a
cgi-bin URL which specifies the date. The cgi creates a zip archive of the
images for that date and responds with the necessary HTTP for the client to
understand it, in this case it's PHP:

header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
header("Expires: Fri, 4 Nov 2005 00:00:00 GMT");
header("Content-Type: application/zip");
exec("/usr/bin/zip -qj $tmpfile $Directory/*.gif");
passthru("/bin/cat $tmpfile");

The important part is "Content-Type: application/zip", the other bits are to try
to prevent client side caching. The last two commands create a temporary zip
file of the GIFs in a directory, which is then streamed back to the client.

The client requests the zip file by opening the correct URL, which it reads as a
ZipInputStream:

URL url = new URL("url of cgi-bin");
ZipInputStream zipStream = new ZipInputStream(url.openStream());

and from there the client can access the images in the ZipInputStream. In my
case I always want to read them in sequence. Random access to a zip might be
more problematic.

 

[grasp06110]

Zip up the images, and send the zip file. In the client, read the images from
the zip.

That's what I do for displaying a 24hr "movie" of ionosonde data, with one image
every 5 minutes. The client (an applet in this case) requests the images via a
cgi-bin URL which specifies the date. The cgi creates a zip archive of the
images for that date and responds with the necessary HTTP for the client to
understand it, in this case it's PHP:

header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
header("Expires: Fri, 4 Nov 2005 00:00:00 GMT");
header("Content-Type: application/zip");
exec("/usr/bin/zip -qj $tmpfile $Directory/*.gif");
passthru("/bin/cat $tmpfile");

The important part is "Content-Type: application/zip", the other bits are to try
to prevent client side caching. The last two commands create a temporary zip
file of the GIFs in a directory, which is then streamed back to the client.

The client requests the zip file by opening the correct URL, which it reads as a
ZipInputStream:

URL url = new URL("url of cgi-bin");
ZipInputStream zipStream = new ZipInputStream(url.openStream());

and from there the client can access the images in the ZipInputStream. In my
case I always want to read them in sequence. Random access to a zip might be
more problematic.

--
Nigel Wade, System Administrator, Space Plasma Physics Group,
University of Leicester, Leicester, LE1 7RH, UK
E-mail : (e-mail address removed)
Phone : +44 (0)116 2523548, Fax : +44 (0)116 2523555

Hi Nigel,

Thanks for the help!

I'm still not sure what to do about getting the images rendered in the
jsp on the client once I have the data on the client. The only thing
I've been able to find basically uses an img tag and sets the data to
some url. I'm not sure how to go from img src=somefile to img
src=data from an input stream.

John

 

[grasp06110]

Hi Nigel,

Thanks for the help!

I'm still not sure what to do about getting the images rendered in the
jsp on the client once I have the data on the client. The only thing
I've been able to find basically uses an img tag and sets the data to
some url. I'm not sure how to go from img src=somefile to img
src=data from an input stream.

John

Sorry, I should be more clear (I didn't see the applet part). Is
there a way to do this in an html page with out using an applet?

John

 

[Lew]

Sorry, I should be more clear (I didn't see the applet part). Is
there a way to do this in an html page with out using an applet?

Use an <img> tag that refers to your own servlet that emits the image.

<img src="/Imager?name=foo.jpg" />

The Imager servlet will read the input stream and emit the image.