All geek questions in one place

Add Bitmap to HTML

I have an ASP.NET web form. This web form has an event handler that generates some HTML. This HTML is time-based, so it is created in the event handler. Based on the time of day, an image is created programmatically using the following method:

private Bitmap GetImageForTime(DateTime time) { Bitmap bitmap = new Bitmap(); // Dynamically build the bitmap... return bitmap; }

I want to call this method when creating HTML code. However, I do NOT want to write the image on the server. Instead, I would like to find a way to write it along with HTML. In a way, I'm trying to do the following:

 protected void myLiteral_Load(object sender, EventArgs e) { string html = "<table><tr><td>"; html += GetImageForTime(DateTime.Now); // This is the problem because it binary. html += "</td><td>"; html += GetWeatherHtmlText(); html += "</td></tr></table>"; myLiteral.Text = html; }

Is it possible? If so, how?

+4
source share
6 answers

Create another aspx page called TimeImage.aspx , and then enter this code in the Page_Load code for the page:

 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 create your html generation as follows:

 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, this page changes the mime response type to image/jpeg , converts the bitmap image to JPG and then saves it to the response output stream so that the image tag can display it as JPG.

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

0
source

I would suggest implementing IHttpHandler , which generates your image and returns it as a stream of bytes. 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 as soon as you learn about 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; } } }
+5
source

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

+2
source

You could potentially use a data URI scheme in a <img> tag or in some CSS , but I personally wouldn’t.

A few more explanations.

+2
source

Images in HTML are displayed as a result of the <img> element in HTML. I do not believe that there is another way to display an image on an HTML page.

You will need to write a handler that can be called via the URL in the src attribute of the <img> element. This handler will generate and return an image.

+1
source

In addition to the solutions already set for using the data URI scheme or sending a dynamically created image (therefore, without saving it), there is another odd solution that you can try: a table with each cell 1-pixel high and wide and the correct background per cell and without borders, of course ... GIMP, for example, is capable of exporting images in such a way as html, and if you force the size of the cells and the table, you can see the image as if it were embedded ... of course, it is quite "heavy" if the image is large but it can This works fine for relatively small images.

EDITED (added italics )

0
source

Source: https://habr.com/ru/post/1313692/

More articles:


All Articles