ansaurus

Question

Add Bitmap to HTML

Answer 1

+1 A:

Images in HTML are displayed as a result of an <img> element in the HTML. I don't believe there is any other way to display an image in an HTML page.

You will need to write a handler which can be invoked via the URL in the src attribute of the <img> element. That handler will generate and return the image.

John Saunders 2010-06-23 19:04:41

Answer 2

+2 A:

The way I have done this is to create an image tag in the HTML and point the image source (<img src="xxx" />) to a page that dynamically creates the image and returns that (and only that) on the response stream, with the correct mime type.

Oded 2010-06-23 19:05:46

Answer 3

+2 A:

Potentially you could use the data URI scheme in an <img> tag or in some CSS but personally, I wouldn't.

Some more explanation.

LeguRi 2010-06-23 19:06:37

I always liked it but unluckly discovered at the time I made my tests, it was not so widely supported (in particular, it was not supported by IE, I don't know anything about current vers anyway)

ShinTakezou 2010-06-23 19:09:56

Answer 4

+5 A:

I would suggest implementing an IHttpHandler that generates your image and returns it as a byte stream. Then in the tag on the page, set the src attribute to the address of the HTTP Handler.

<html><body><img src="TimeImageHandler.ashx"/></body></html>

Example: http://www.c-sharpcorner.com/uploadfile/desaijm/httphandlersforimages11152005062705am/httphandlersforimages.aspx

Generic HTTP Handlers are pretty simple to create once you're aware of them:

public class TimeImageHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        Bitmap bitmap = GetImageForTime(DateTime.Now);
        context.Response.ContentType = "image/jpeg";
        bitmap.Save(context.Response.OutputStream, ImageFormat.Jpeg);
    }

    public bool IsReusable { get { return false; } }
}

Toby 2010-06-23 19:12:33

Answer 5

A:

Beyond the already given solutions of using the data URI scheme or sending the image dynamically created (so, without storing it), there's another odd solution you can try: a table with each cell 1-pixel tall and wide and proper background per cell, and no borders of course... GIMP e.g. is able to export images this way as html, and if you force the size of cells and table, you can see the image as if it were embedded... of course, it is rather "heavy" if the image is big, but it could work ok for relatively small images.

EDITED (italics part added)

ShinTakezou 2010-06-23 19:12:51

Of course doing the example of GIMP I am not saying you use it to do that... I am just saying it is easy to be done someway, it's like generating a normal table in html, so lots of `html +=` ...

ShinTakezou 2010-06-23 19:14:02

Answer 6

+1 A:

Create another aspx page called TimeImage.aspx then in the Page_Load of the code-behind for the page put this code:

void Page_Load(object sender, EventArgs args) {
    string mime = "image/jpeg";
    Response.ContentType = mime;

    Bitmap b = GetImageForTime(DateTime.Now);

    var codec = ImageCodecInfo.GetImageEncoders().Where(i => i.MimeType == mime).SingleOrDefault();

    if(codec != null)
        b.Save(Response.OutputStream, codec, null);
}

Then make your html generation look like this:

protected void myLiteral_Load(object sender, EventArgs e)
{
  string html = "<table><tr><td>";
  html += "<img src='TimeImage.aspx'>"
  html += "</td><td>";
  html += GetWeatherHtmlText();
  html += "</td></tr></table>";
  myLiteral.Text = html;
}

This will create an img tag that calls the TimeImage.aspx page, that page changes the response mime-type to image/jpeg, converts your bitmap to a JPG, and then saves it to the response output stream so that the image tag can display it as a JPG.

If you prefer a different format just change the mime type at the top (e.g. "image/gif" for GIF, or "image/png" for PNG).

joshperry 2010-06-23 19:26:45

ansaurus

tags:

views:

answers:

Add Bitmap to HTML

related questions