Dynamically putting binary images into an HTML page

Hi all,

I have the following tough one.
I have this DHTML page with some <IMG> tags on it.
While I can change the images within using imgId.src="path..." easily enough. I have some prety good reasons not to do it this way.
What I would like to do is get a chunk of binary data to the browser, separate it into several smaller chunks (each containing one image data) and put this data into my IMG elements.
The target browser is IE5.0 and up only.
The target server is IIS 5.0 and up.
However all this has to be done using JavaScript and any "safe for scripting" ActiveXs that already exist on the user's machine (i.e. no downloads or scary security dialogs, no Java either).
I assume the first part - getting the binary data into the browser can be accomplished using the XMLHTTP object to transfer binary data, although I'm not sure about the specifics.
The second part of how to put this data into the HTML page has got me completely stumped, although I've been told it can be done.

Thanks.
LVL 10
eyal_mtAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
avnerConnect With a Mentor Commented:
I would suggest a different approach that would have the same effect :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Blank:Document </TITLE>
<META NAME="Author" CONTENT="(C)Avner Cohen">
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
var part=1;
function swapImage()
{
var oImage=document.getElementById("aa");
if (part)
     {
     oImage.style.clip='rect(0px 112px 64px 0px)';
     window.status="clipper"
     }
     else
     {
     oImage.style.clip='rect(0px 215px 64px 112px)';
     window.status="auto"
     }

part=!part;

}
-->
</SCRIPT>
</HEAD>

<BODY onload="swapImage()">
<img src="http://www.experts-exchange.com/images/kp_logo2.gif" id="aa" style="position:absolute">
<br><br><br><br><br><br><br>
<input type="button" onclick="swapImage()" value="Change Image">
</BODY>
</HTML>

0
 
thirdCommented:
listening....
0
 
lexxwernCommented:
you cannot put binary chunks straight away into the browser, those binary chunks will have to be stored as files and then be put into the html page by <img>.

so since you need to read and write from and into files directly, it will HAVE TO be done server side.

so dont accept a good client side solution, pls comment if server side suits you, and if yes pls. tell which server side language.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
eyal_mtAuthor Commented:
Nope,
the reason I'm doing all this is to prevent the round trip to server for EACH image (and there are many of them).
0
 
zvonkoCommented:
Preventing round trip is an illusion.

Beside that embedding image data in html is not possible it would not bring any advantage. The small amount of extra protocol overhead to fetch single images (hundred on a page is not unusual) is good investment to keep the page dynamic because the images are cached by browser. Even worse with one big html: if some of the images are equal content you have to transfer them with every page update; with single images you can use same image several times on same page and it will be transferred only once.

Regards,
zvonko

0
 
eyal_mtAuthor Commented:
Avner,
seems like a nice partial solution to my problems.
One problem I have with this one, is that in some scenarios I have many small images, on my page and if I combine them to a huge image, and then clip, I'm worried that it might affect the browser's memory consumption, and rendering performance. There are other problems with this one.
0
 
avnerCommented:
Eyal,
I can not assure this, but I presume that if you will use the same object for the image, you won't face any memory issues :

a= new Image();
a.src=blalala.gif

then get the images from your page and clip the image into them :

document.getElement("placeHolder1").src=a.src;
document.getElement("placeHolder1").style.clip=.....
document.getElement("placeHolder2").src=a.src;
document.getElement("placeHolder2").style.clip=.....

But it's a guess, I am not sure how to verify it.
0
 
eyal_mtAuthor Commented:
Avner,
seems like a nice partial solution to my problems.
One problem I have with this one, is that in some scenarios I have many small images, on my page and if I combine them to a huge image, and then clip, I'm worried that it might affect the browser's memory consumption, and rendering performance. There are other problems with this one.
0
 
avnerCommented:
eyal_mt, are we getting somewhere here ?
0
 
eyal_mtAuthor Commented:
Avner,
again its a partial solution so if I don't get anything better I'm probably going to use this one, but for now I would rather wait.
0
 
Chandramouli kArchitectCommented:
listening..
0
 
BigRatCommented:
lexxwern is correct.

There is *NO* facility in the HTML DOM, nor anything implemented on the side by Mark Andressen et al., which allows anything like :-

    document.images.image.bitmap = var_containing_pixels;

There is of course, in IE, Vector Markup Language, which you can use to construct pictures like graphs and such.

That being said, you could always make a COM object, which you embed in the page (probably many times) and use a bit of Javascript to load an XML file into a created XML DOM, extract the pictures from the XML tree and shove them into the COM objects.

Frankly its hardly worth it.

However, you think it is a problem. That implies something special about your pages. Are all these images little spacers or similar?
0
 
ahosangFinance Systems DeveloperCommented:
No comment has been added lately, so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area that this question is:

points to avner
Please leave any comments here within the next seven days.
 
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!
 
ahosang
EE Cleanup Volunteer
0
 
moduloCommented:
Finalized as proposed

modulo

Community Support Moderator
Experts Exchange
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.