Showing image stored in XML at webpage

[Devvald]

I'm working on a system that uses XMLHTTP to get information to an ASP page. XML Now I want to be able to send images this way. I know how to embed images in an XML document (think they will be in base64 format), but when the ASP site at the clients side receives the XML document, how can I show the image? is the only information carrier available, hence I can't just insert an url for the image, it has to be embedded in the xml document.

I've tried to use a div-tag that I try to update the innerHTML of, but that doesn't work. I mean, what should I put in there? I cannot put a <img> tag since there are no filename to give as src argument. I cannot either, of course, just insert the response since it'll just show rubbish (the gif-file as characters).

Here's a snippet of the code run at the server:
Set xml = Server.CreateObject("Microsoft.XMLHTTP")
xml.Open "GET", "

http://localhost/test1/test1.gif",

False
xml.Send
Response.ContentType = "image/gif"
Response.Write xml.responseBody

For the client side I don't have any code worth to mention. How can I handle this answer to show my image in the browser?

 

[JontyMC]

Explain why you cant use a URL?

 

[Devvald]

Simply because if I use an URL the link will most probably not give the desired image when the client browser requests it.

The image comes from an external software. When the xmlhttp request reaches the server, the application will be asked to render a new image based upon the information sent by the client browser in the request. This application don't let me specify an output file name but uses its standard output file name. I then want to take this file and send it to the requesting browser. The rendering of a new image will normally take place immediately when the response is sent, hence the file will be overwritten with new information and might not be the same when the client browser gets it.

However, do you think it would be possible for me to make the image show when it's sent that way?

 

[SgtPeppa]

Not exactly what you are looking for but it might help!

http://support.microsoft.com/default.aspx?scid=KB;EN-US;Q303982&ID=KB;EN-US;Q303982

Stephan

 

[JontyMC]

You need to decode the data, save as a image file, then reference that image in some way. This link tells you how to code the decoding:

http://www.izhuk.com/painter/product/doc/base64.htm

 

[Devvald]

SgtPeppa: Thank you, but I already covered that part, the problem is how to handle the response at the client side.

JontyMC: I figured that's what I might have to do. Thank you for the link.

However, this is a real-time application and execution time is essential. Anyone that can think of another way to solve this to go around the save-load part since disk access is not very fast. That is taking the byte array I get when decoding the base64 representation of the image and put it directly to the webpage...

 

[JontyMC]

After much trawling, I think this is what you're after:

http://www.kryogenix.org/days/2003/10/18/embedding

In short, it's not possible to do what you want (at least in internet explorer). So, unfortunately, you'll have to save it to a temporary file.

Jon

 

[Devvald]

Yes, seems like that was about what I was looking for, thank you for trying, too bad it wouldn't work in IE though...

 

[flumpy]

Why cant u set the a src to the server side script?

<img id="myImage" src="/my/location/myapp.asp">


You can write that code you initially wrote to retrieve the image, and put that in your src.

So basically:
1. embed a call in the img src to the server side application that performs the decode
2. fetch the image as you are doing when the user either clicks through into the page or set an update on the page with javascript or meta refreshes

Or something.

Or am I missing something?

Matt

 

[flumpy]

actually setting a time out to change the image src to a new src like this:

..
setTimeout("changeImg()", 200);
..
function changeImg()
{
  var timestamp = new Date();
  myImage.src = "/my/script/location/getImage.asp?dummy="+timestamp;
}
...
<img src="/my/script/location/getImage.asp" id="myImage"/>

 

[Devvald]

Well, I've tried that. There are som problems though: I have several images, it's crucial that all of them is updated at the same time. That is, they have to be downloaded to the client before showing. The images are all parts of a virtual video window, so updating one at a time will make just a part of the new image frame to show at a time. It works fine when the user has a good connection, but I want it to work for people who doesn't have the best connection. That's the reason I wanted to embed all the small image parts in an xml and show them all when they are downloaded.

But I'm open to all kinds of solutions, so far I've tried Flash, MPEG4, XMLHTTP withing asp-pages. I got it to work in one way or another with all solutions, but I'm looking for the fastest solution possible. My hope using this solution was that I would only need to transfer the parts om the image that had changed (there's a lot of local changes in the animation, that leaves the rest of the image unchanged).

My most recent try is to just send the url:s of the images in the xml-file, then retreive (preload) them with a javascript before showing them all. Two reasons why this solution is too slow:
1. At the serverside I have to load and resave the images with new names before sending the links (since they otherwise will be overwritten as I earlier explained). Disk access is slow...
2. During the preload phase all images is downloaded separately, that means a new http connection is opened for every part of the image. Opening http connections takes time...

However, I don't doubt that there are a variant of your solution that will work, I just don't see it.

 

[flumpy]

In that case a Java applet may then be the best solution; that way, you can control the connections and deal with all the gubbins of the image in the best and fastest way possible (ie, opening/closing the http connections on a thread, dealing with multiple images, decoding the graphics etc etc). Lets revisit the problems first tho, to see if we can find an HTML way:

As you probably know, but I state here for completeness, is that the main issue is that one browser can only open one HTTP connection at a time. To get around this you could use multiple hidden frames to preload images into variables (so they are not displayed). So, if you preload the images into several frames, and then retrieve those images into the main frame when the load has finished I think thats going to be the fastest you can get from that method.

Flash isn't multithreaded (AFAIK), and you will not get good performance that way. You need a way of doing multiple tasks all at once, and you are being limited by your technology.

Give Java a try, or C# if you are particularly MS inclined. If you don't know any, now may be a good time to start!

 

[Devvald]

Thank you flumpy. Actually I'm already working on a JavaApplet as I realized it should probably be the best solution. At the same time I have created a working, but not fast enough, asp/javascript/xmlhttp solution. What I didn't know was the fact that different frames have their own http connections. So I'll try to add that to that solution. I will finish both solutions, since neither of them are too complex, and then evaluate the results. Maybe I could offer two solutions depending of what the client supports...

I know Java quite well, especially everything concerning communication, sockets and streams. I don't want to be particulary MS inclined so I'll give C# a pass.