How can I construct images using HTML markup?

Question

I need to display reports and things in HTML using Microsoft's HTMLDocument object.

Unfortunately, you can give the document HTML markup, but you cannot give it images. It is only able to display images you get from a URL, e.g.:

http://
file://
res://

As a workaround I figured I could construct an image using HTML markup, pixel-by-colored pixel.

Has there been any work in this area? Should it be absolutely positioned 1x1 colored spans? A 350x200 table, with rows and columns both one-pixel in size?

Speaking of images: http://i132.photobucket.com/albums/q21/EmarandZeb/SampleInProgress/AtFirstButThen_Small.jpg — GEOCHET, Jul 23 '09 at 15:32
I did this for a laugh back around 1998. It never occurred to me that somebody might seriously consider the idea. FWIW, it crashed the browser pretty quickly :-) — NickFitz, Jul 23 '09 at 17:31

score 7 · Accepted Answer · answered Jul 23 '09 at 15:45

7

Can you just use the Data URI scheme?

IE8 supports this (as do most newer browsers); your images would look like this:

<img src="data:image/png;base64,A0123...==">

where the A0123... stuff is a base64 representation of an image file. Depending on the language you're using, you may be able to take advantage of Convert.ToBase64String() to do much of the work for you.

answered Jul 23 '09 at 15:45

Daniel LeCheminant

50,583
16
120
115

When i first started trying to use mshtml for reports, IE5, there was no such thing. This is probably the answer going forward. – Ian Boyd Jul 23 '09 at 17:04

score 6 · Answer 2 · answered Jul 23 '09 at 15:33

6

The simplest way, in my opinion, is to use a base64 encoded image. It's efficient enough, and there are tools to automate generation: http://www.greywyvern.com/code/php/binary2base64.

answered Jul 23 '09 at 15:33

FWH

3,205
1
22
17

score 2 · Answer 3 · answered Jul 23 '09 at 15:30

2

People have, much to the horror of all, done some solid work in this area. The solution I link to uses tables with RLE compression, which seems smart enough to me.

answered Jul 23 '09 at 15:30

chaos

122,029
33
303
309

This is interesting. I actually never thought of something like this...probably because it's really not useful, but still cool. – user140125 Jul 23 '09 at 15:49
"URI-encoded images have made table-encoded images obsolete (except for Internet Explorer)" – Ian Boyd Jul 23 '09 at 17:20

score 2 · Answer 4 · answered Jul 23 '09 at 15:37

2

First, a word of caution: this is an awful, terrible thing you are planning to do.

Now that we've got that out of the way, I happen to have done a good deal of this terrible thing. I can tell you that you're best bet is to use tables, not divs or spans. Even so, it's terribly inefficient and takes forever to load, as you can see from the samples I linked to. Just don't do it, other than as a perverse joke.

answered Jul 23 '09 at 15:37

Pesto

23,810
2
71
76

You just had to include a picture of me in your answer, didn't you? – Welbog Jul 23 '09 at 15:39
@Welbog: I did?! Which pony are you? – Pesto Jul 23 '09 at 15:40
I didn't know ponies could have afros! – GEOCHET Jul 23 '09 at 15:41

score 0 · Answer 5 · answered Jul 23 '09 at 15:35

0

I wrote a PHP class a few years ago to do this, but I wouldnt recommend using this in the real world as it takes a long time for a browser to render a table big enough for an image.

Unless I'm not understanding your question correctly, why can't you refer to the image using a full URL:

http://somewhere.com/myimage.jpg

answered Jul 23 '09 at 15:35

Jacob Wyke

364
1
7

Because there is no static image that exists as any resource anywhere. Imagine an a report in HTML that shows a graph constructed in memory. – Ian Boyd Jul 23 '09 at 17:10

score 0 · Answer 6 · answered Aug 04 '10 at 15:37

0

"reports and things"... could be a bit clearer here...

If what you ultimately want to do is display a report which happens to be dynamically generated, chances are you can automatically generate an image of the report. 'Export to PDF' is probably available in the report tool. Crude, but simpler and more efficient than where you seem to be headed now.

answered Aug 04 '10 at 15:37

MickeyfAgain_BeforeExitOfSO

4,112
5
26
27

"Export to PDF" option is not available in the report tool. Also the report tool is buggy, and will usually cause a crash - which is why i want to move away from it. And all other reporting tools require you to ship external code (dll, etc) to create reports - not an option. – Ian Boyd Aug 04 '10 at 16:57
Printing to PDF with something that emulates a printer, such as cutePDF? That would require you to at least ship a freeware PDF printer emulator, so if shipping any external code is ruled out that won't help. Still sound like less work than the proposed alternative, but if you have business or 'political' constraints I guess you're stuck. "the report tool is buggy" - this sounds like a new and different problem. – MickeyfAgain_BeforeExitOfSO Aug 05 '10 at 00:01

score 0 · Answer 7 · answered Feb 01 '11 at 06:41

In IE only you can use VML which gives basic SVG-like vector drawing abilities.

This guy's created a javascript library to draw vector graphics in browsers using just sivs: http://web.archive.org/web/20080112113027/www.walterzorn.com/jsgraphics/jsgraphics_e.htm (site seems down at the moment)

These days you could also try a library such as Raphaël which uses the brower's canvas or VML support.

How can I construct images using HTML markup?

7 Answers7

Linked