CODEWITHSUNDEEP
c#asp.netsql-serverimage
XiAnG
XiAnG

Reputation: 215

Insert image into asp.net image tag

I'm trying to display my picture out on the image tag at my webform in a web application which i used VS2012 to develop. I have already stored my image in a binary form in the sql server 2008. I attempted to display out the image through the c# codes. However, the image displayed out is the exact dimension size. I'm trying to store this particular selected into the image tag with a specific dimension. Here are my codes which i used to display out my image.

This code here is for me to select out the picture from the database. I managed to display the picture out by using this.

string strQuery = "select profilepic from LoginRegisterOthers where username=@username";
            SqlCommand cmd = new SqlCommand(strQuery);
            cmd.Parameters.Add("@username", SqlDbType.VarChar).Value = username;
            DataTable dt = GetData(cmd);
            if (dt != null)
            {
                download(dt);
            }

This code then used to convert the image binary data into an image.

private void download(DataTable dt)
    {
        Byte[] bytes = (Byte[])dt.Rows[0]["profilepic"];
        Response.Buffer = true;
        Response.Charset = "";
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.ContentType = "image/jpg";
        //Response.AddHeader("content-disposition", "attachment;filename=" + dt.Rows[0]["Name"].ToString());
        Response.BinaryWrite(bytes);
        Response.Flush();
        Response.End();
    }

Upvotes: 0

Views: 6273

Answers (3)

G. Stoynev
G. Stoynev

Reputation: 7783

What you do with the binary array needs to change (if I guessed correctly what you're trying to do)

This is an alternative technique of inserting binary contents into image tag.

Instead of just streaming the binary contents down to the browser, you could write it in the src attribute of the <img> tag. The HTML you are aiming to have would look like this example (note that the image contents is Base64-encoded):

<img   src="data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPb
WLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVr
ApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KT
kpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxM
AF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=
" alt="British Blog Directory" width="80" height="15" />

Now, to accomplish this, you have probably several options. It all depends how you're rendering the <img> tag. If you're using a server-side control, then code like this may do (this sample snippet comes from this SO answer):

byte[] picByteArray = user.Picture.ToArray(); 
string myPicString = Convert.ToBase64String(picByteArray); 
myPicture.Attributes["src"] = "data:image/gif;base64," + myPicString;

ADDITION:

One possible benefit of going that way is that, if design allows it or requires it, you could retrieve more than one image in a single database trip.

But as I also say in the comments, this method comes with the downside that images are processed synchronously, as your page is processed.

Upvotes: 2

Jay Jay Jay
Jay Jay Jay

Reputation: 1990

Have a look at this url. One of the users has created a function that takes a System.Drawing.Image as input. You will probably have to write the binary data you download from your db into an object of type System.Drawing.Image before you call the function that is written in the page below

http://social.msdn.microsoft.com/Forums/en-US/csharpgeneral/thread/a43fe625-a5cd-4438-895f-3ddeec6eb866/

Upvotes: 1

Piotr Stapp
Piotr Stapp

Reputation: 19830

You have two choices:

  • in tag specify width and height of the image using CSS or html attributes. This causes that users will always download full size image but it will be displayed cropped
  • in src of img tag put width and height like: image.aspx?width=200&height=100. Parse query string on server side and resize image on server.

Of course you can use mix of both.

Upvotes: 0

Related Questions