Use a System.Drawing.Image in an HTML tag

Question

I have a potentially easy question. I have an image stored in a database, I then used a C# method in my application that gets that image and stores it in a custom class that looks like this:

public class MyImage
{
 public System.Drawing.Image myImageFromDB;
 public string imageName;
 public int imageNumberInCollection;
}

My question is this: Can I/How can I use the image from this class in an HTML image tag? I have attempted the following but it just returns a box with a red X in it:

//myImageFromDBCollection is a list of MyImage objects
foreach(var ind in myImagesFromDBCollection)
{
  table += String.Format("<image src={0} />", ind.myImageFromDB);
}

Any ideas on what I am doing wrong?

Answer 1

If I were you, I'd keep image files on disk, and just have the image filenames in your db.

If you're having a problem with your image formatting, than just look at your source and make sure it's correct.

Answer 2

I ended up going with Brads Method of solving this (See the comment under the question) I ended up creating a method that takes in a System.Drawing.Image and converts it to a byte array then encode that byte array to get the image. The code looks like the following:

byte[] imgBytes = turnImageToByteArray(ind.ind.myImageFromDB);
string imgString = Convert.ToBase64String(imgBytes);
table += String.Format("img src=\"data:image/Bmp;base64,{0}\">", imgString);

private byte[] turnImageToByteArray(System.Drawing.Image img)
{
  MemoryStream ms = new MemoryStream();
  img.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp);
  return ms.ToArray();
}

Currently this works for my purposes so thank you to everyone and their suggestions, as always everyone comes though and helps :-)

Answer 3

Images can be served using generic handlers (ashx files):

public class StickerHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/png";
        context.Response.Cache.SetCacheability(HttpCacheability.Public);
        context.Response.BufferOutput = false;

        //TODO: link your MyImage to iSource using imageId query parameter...
        Image iSource = null;
        MemoryStream ms = new MemoryStream();
        iSource.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
        byte[] data = ms.ToArray();
        ms.Dispose();
        g.Flush();
        g.Dispose();
        iSource.Dispose();

        context.Response.BinaryWrite(data);
    }

    public bool IsReusable
    {
        get
        {
            return true;
        }
    }

}

More about generic handlers can be found here:

http://msdn.microsoft.com/en-us/library/bb398986(v=vs.100).aspx

Inside your image:

<img src='StickerHandler.ashx?img=imageId' />

Happy coding!

Answer 4

If you have to store your images in the database, a simple way to view them would be to use an image handler.

Basically, you can create an ASHX handler which accepts a query string that is the Image ID in the database and returns the image content along with the correct mime type. This is quite simple to do in C#.

You can then point the <img /> tag to the handler with the specified ID. Something like

table += String.Format("<image src='/ViewImage.ashx?id={0}' />", ind.myImageId);

Here is a basic tutorial to get you started.

A common performance improvement would be to cache the images on disk within the handler.