Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 689
  • Last Modified:

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.
0
eyal_mt
Asked:
eyal_mt
1 Solution
 
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
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
avnerCommented:
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
 
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
 
kcm76Commented:
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
 
ahosangCommented:
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now