Monday, April 17, 2006 - Posts

Embedded Images in Html

Hello to all,

 

I havend blogged since a long long to but I gess I need to start again so here I go.

 

A colleague of mine was working on a html report for a windows application and had the problem then he needed to have a embedded image (this mean he doesn’t want to link to a image location using <img src=””> but just a string or something to display the image).

The problem with this is that he found the ‘OBJECT‘ tag in witch you can give a base64 encoded image but this won’t work in IE!

 

So after some searching from my side I found the following site http://bennherrera.com/EmbeddedImage/ witch show’s that with a encoded string and JavaScript you can embed a image. This is really nice but the encoding of the string  (witch originally was done in java) takes a long time ( it also took along when I  converted the java to c#). So this was not really the answer for me (Bummer).

 

But with the JavaScript source I was seeing that it is possible to use tables to create a embedded image. The bummer with this off course is that you will get a Huge html file and that the browser can go hang. But still this is about the only way to embed a image in your HTML. So I created a small class with three different types of creating a table the first method is called ‘ToPlainHtml’ will take the image and create for every pixel a cell with a background color that is needed, This will create a huge HTML file even if the entire image is black.

So I started to optimize the code an came up with the method called ‘ToOptimistedHtml’ this method differs In that it uses ‘colspan‘ in the cells if the color is the same as the last color. But this will still create a lot of “bgcolor=’#HexColor’” so I wanted to use CSS.

So the final and best optimized method (this using css/html and my brains) is ’ToOptimistedHtmlWithCss  this will use ‘colspan’ in the table cells, ID’s so set the color and will use the most used color as table background. (All the functions work in IE, Firefox and opera)

 

Anyway I hope some of you can use this code it took me some time to figure out but it was nice. Also a word of Warning  Don’t use this for big images because The Browser Will Hang!

 

Happy netting,

Warnar boekkooi

 

The Code:

http://www.bulgarije-verkeersbureau.nl/Class/EmbeddedImage.zip