如何使用HTML标记构造图像？

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, eg:

• 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?

Answer 1

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.

Answer 2

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 .

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

"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.

Answer 7

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.