Solved

Dynamically putting binary images into an HTML page

Posted on 2002-06-30
14
681 Views
Last Modified: 2007-11-27
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
Comment
Question by:eyal_mt
14 Comments
 
LVL 30

Expert Comment

by:third
ID: 7121048
listening....
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7121196
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
 
LVL 10

Author Comment

by:eyal_mt
ID: 7121208
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
 
LVL 14

Accepted Solution

by:
avner earned 500 total points
ID: 7121402
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
 
LVL 10

Expert Comment

by:zvonko
ID: 7121434
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
 
LVL 10

Author Comment

by:eyal_mt
ID: 7121436
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
 
LVL 14

Expert Comment

by:avner
ID: 7121438
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 10

Author Comment

by:eyal_mt
ID: 7121440
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
 
LVL 14

Expert Comment

by:avner
ID: 7123749
eyal_mt, are we getting somewhere here ?
0
 
LVL 10

Author Comment

by:eyal_mt
ID: 7123940
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
 
LVL 5

Expert Comment

by:kcm76
ID: 7124094
listening..
0
 
LVL 27

Expert Comment

by:BigRat
ID: 7203682
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
 
LVL 12

Expert Comment

by:ahosang
ID: 8287079
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
 

Expert Comment

by:modulo
ID: 8360818
Finalized as proposed

modulo

Community Support Moderator
Experts Exchange
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now