Convert from binary data to an image control in ASP.NET

Question

I have binary data of an image in my database, and I want to display it in an image control in ASP.NET. How? If it is impossible, please find another way to save it in the database and display it in an image control.

Take a look at the answer to this similar question: http://stackoverflow.com/questions/6987433/display-image-from-database-in-asp-net-with-c — IrishChieftain, Sep 12 '11 at 16:29

score 42 · Accepted Answer · edited Feb 28 '15 at 22:16

42

Create a regular HTML img element like so:

<img runat="server" id="image" />

And in code behind do this:

image.src = "data:image/png;base64," + Convert.ToBase64String(imageBytes);

Where imageBytes is a byte[].

You are done. The image will be displayed.

edited Feb 28 '15 at 22:16

Peter Mortensen

30,738
21
105
131

answered Sep 12 '11 at 17:00

Icarus

63,293
14
100
115

This is by far the easiest way to display binary images so far. BUT i found that this method works only with jpg images. I tried this with png images but it did not work. – SamuraiJack Aug 23 '13 at 12:06
The method works on jpg and png as long as the browser supports it. It may be that your browser does not support it or their implementation is buggy. – Icarus Aug 23 '13 at 13:16
Can you please explain `data:image/png;base64` ? – SamuraiJack Aug 24 '13 at 04:39
You are correct it was problem with IE, its working just fine in chrome. Any idea how can i make it work in IE? – SamuraiJack Aug 24 '13 at 08:38

score 5 · Answer 2 · edited Feb 28 '15 at 22:13

Most likely the image is being stored as a byte array in the database. If so, then you can use this:

public static System.Drawing.Image ByteArrayToImage(byte[] bArray)
{
    if (bArray == null)
        return null;

    System.Drawing.Image newImage;

    try
    {
        using (MemoryStream ms = new MemoryStream(bArray, 0, bArray.Length))
        {
            ms.Write(bArray, 0, bArray.Length);
            newImage = System.Drawing.Image.FromStream(ms, true);
        }
    }
    catch (Exception ex)
    {
        newImage = null;

        //Log an error here
    }

    return newImage;
}

score 1 · Answer 3 · edited Mar 02 '22 at 15:44

In a generic handler (.ashx):

public class ImageHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        if(!string.IsNullOrEmpty(context.Request.QueryString["ImageId"]))
        {
           try
           {
                string ImageId = context.Request.QueryString["ImageId"].ToString(); 
                ImageDataModel idm = new ImageDataModel();
                byte[] ImageData = idm.getImageData(ImageId);
                context.Response.ContentType = "image/JPEG";
                context.Response.OutputStream.Write(ImageData, 0, ImageData.Length); 
            }
            catch(Exception ex){}
        }
    }

}

score 1 · Answer 4 · answered Jan 22 '12 at 12:24

public Byte[] Ret_image(Int32 id)
{
    SqlCommand cmd = new SqlCommand();
    cmd.CommandText = "select * from tbimage where imageid=@id";
    cmd.Connection = con;
    cmd.Parameters.Add("@id", SqlDbType.Int).Value = id;
    SqlDataReader dr = cmd.ExecuteReader();
    dr.Read();
    Byte[] ar = (Byte[])(dr[1]);
    dr.Close();
    cmd.Dispose();
    return ar;
}

score 1 · Answer 5 · edited Oct 29 '12 at 00:31

protected void Button2_Click(object sender, EventArgs e)
{
    Byte[] ar = Ret_image(Convert.ToInt32(TextBox2.Text));
    String st = Server.MapPath("abc.jpg");
    FileStream fs = new FileStream(st, FileMode.Create, FileAccess.Write);
    fs.Write(ar, 0, ar.Length);
    fs.Close();
    Image1.ImageUrl = "abc.jpg";           
}

Use this event for the button click to retrieve image and call the Ret_Image method here.

score 0 · Answer 6 · edited Oct 10 '12 at 19:54

SqlConnection con = new SqlConnection();
string _path;
Using SYstem.IO;
Using System.Data.SQLClient;

//convert Image to binary and save in DB

private void button1_Click(object sender, EventArgs e)
{
    if (openFileDialog1.ShowDialog() == DialogResult.OK)
    {
        _path = openFileDialog1.FileName;
        InsertInSQL(_path);
    }
}

private void InsertInSQL(string _path)
{
    con.ConnectionString = Pic.Properties.Settings.Default.ConnectionS;
    string strQ = "insert into dbo.PicTBL(Pic)values(@p)";
    SqlCommand command = new SqlCommand(strQ,con);
    command.Parameters.AddWithValue("@p",ImageToBinary(_path));
    con.Open();
    command.ExecuteNonQuery();
    con.Close();
}      

public static byte[] ImageToBinary(string _path)
{
    FileStream fS = new FileStream(_path, FileMode.Open, FileAccess.Read);
    byte[] b = new byte[fS.Length];
    fS.Read(b, 0, (int)fS.Length);
    fS.Close();
    return b;
}

//Convert Binary to imge and save in a folder
private void button1_Click_1(object sender, EventArgs e)
{
    DataTable dt = Rimage();
    foreach (DataRow row in dt.Rows)
    {
        byte[] b = (byte[])row["Pic"];
        Image img = BinaryToImage(b);
        img.Save("D:\\NewFolder\\" + row["ID"].ToString() + ".jpg");
    }
}

private Image BinaryToImage(byte[] b)
{
    if (b == null) 
        return null;

    MemoryStream memStream = new MemoryStream();
    memStream.Write(b, 0, b.Length);

    return Image.FromStream(memStream);
}

private DataTable Rimage()
{
    con.ConnectionString = Pic.Properties.Settings.Default.ConnectionS;
    SqlCommand cmd = new SqlCommand();
    cmd.CommandText = "select * from dbo.PicTBL";
    cmd.Connection = con;
    SqlDataAdapter adp = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    con.Open();
    adp.Fill(dt);

    return dt;
}

Convert from binary data to an image control in ASP.NET

6 Answers6

Linked