Post
Ask Question

How to Create Thumbnails of Images Stored in Database

Beginners commonly ask how to create thumbnails of images stored in a database and show them in an aspx page. So I decided to build a sample application that uses a repeater control, a generic handler and one aspx page.

My database table name is ImgTable.

  1. USE [TestDatabase]  
  2. GO  
  3. /****** Object:  Table [dbo].[ImgTable]    Script Date: 02/01/2013 13:45:38 ******/  
  4. SET ANSI_NULLS ON  
  5. GO  
  6. SET QUOTED_IDENTIFIER ON  
  7. GO  
  8. SET ANSI_PADDING ON  
  9. GO  
  10. CREATE TABLE [dbo].[ImgTable](  
  11.       [Sno] [bigint] IDENTITY(1,1) NOT NULL,  
  12.       [Name] [varchar](500) NULL,  
  13.       [ImageName] [varbinary](max) NULL  
  14. ) ON [PRIMARY]  
  15. GO  
  16. SET ANSI_PADDING OFF  
  17. GO 

In the ImgTable I have three columns:

  1. Sno that is the identity column

  2. Name

  3. ImageName that is of type VarBinary(MAX) that will store the image

Let's start coding the front end.

In the aspx page I have one repeater control in which I have used one ASP image.
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <asp:Repeater ID="Repeater1" runat="server">  
  5.             <ItemTemplate>  
  6.                 <asp:Image Width="100px" Height="100px" ID="Image1" runat="server" ImageUrl="<%# Bind('name') %>"/>  
  7.             </ItemTemplate>  
  8.         </asp:Repeater>  
  9.     </div>  
  10.     </form>  
  11. </body> 

In the cs file on the page load event I use the following:

  1. string constring = @"Data Source=******;Initial  
  2. Catalog=TestDatabase;Integrated Security=True;User ID=****** ";  
  3. SqlConnection cn = new SqlConnection(constring);  
  4. cn.Open();  
  5. SqlCommand cmd = new SqlCommand("SELECT * FROM  dbo.ImgTable", cn);  
  6. DataTable dt = new DataTable();  
  7. SqlDataAdapter sda = new SqlDataAdapter(cmd);  
  8. sda.Fill(dt);  
  9. List<ThumbNail> li = new List<ThumbNail>();  
  10. foreach(DataRow row in dt.Rows)  
  11. {  
  12.     li.Add(new ThumbNail { thumb = (byte[])row["ImageName"], sno = row["sno"].ToString() });  
  13.     row["name"] = "Handler.ashx?SrNo=" + row["sno"].ToString();  
  14. }  
  15. dt.AcceptChanges();  
  16. Session["file"] = li;  
  17. Repeater1.DataSource = dt;  
  18. Repeater1.DataBind(); 

Don't be confused with List<Thumbnail>li =new List<Thumbnail>(), Thumbnail is my class in which there is two fields of the thumb (type byte array) and sno of type string. As you can see in the preceding code, I created a list of the class type and added sno and image fetched from the database into it and put the list into a session variable that I will later use on my handler.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. /// <summary>  
  6. /// Summary description for ThumbNail  
  7. /// </summary>  
  8. public class ThumbNail  
  9. {  
  10.     public byte[] thumb { get; set; }  
  11.     public string sno { get; set; }  
  12.     public ThumbNail()  
  13.     {  
  14.         //  
  15.         // TODO: Add constructor logic here  
  16.         //  
  17.     }  
  18. } 

Before I proceed let me explain what:

  1. row["name"] = "Handler.ashx?SrNo=" + row["sno"].ToString();
Is doing. Its is just preparing the URL of the image that will be further bound to the imageurl attribute of the image inside the repeater control.

e.g.:
  1. <asp:Image id="Image_1" ImageUrl="Handler.ashx?srno=1" />
Let's move on to the handler. In the handler I have fetched the list from the session and the query string from it and put them into the mylist and nam variables.

  1. string nam = context.Request.QueryString["SrNo"].ToString();  
  2. List<ThumbNail> mylist = (List<ThumbNail>)HttpContext.Current.Session["file"];   

Now here based on nam I will fetch an image from the list and assign it to a byte array and write it to the output stream:

  1. byte[] a = null;  
  2. var byt= mylist.Where(item => item.sno == nam).Select(item => item.thumb);  
  3. var e = byt.GetEnumerator();  
  4. while (e.MoveNext())  
  5. {  
  6.     a = (byte[])e.Current;  
  7. }  
  8. context.Response.OutputStream.Write(a, 0, a.Length);  
  9. context.Response.Flush();   

I have used a LINQ query and Lambda Expression to extract an image from the list but if you want to use another way then you can.

Handler

  1. <%@ WebHandler Language="C#" Class="Handler" %>  
  2. using System;  
  3. using System.Web.SessionState;  
  4. using System.Web;  
  5. using System.Collections.Generic;  
  6. using System.Linq;  
  7. public class Handler : IHttpHandler, IRequiresSessionState  
  8. {  
  9.     public void ProcessRequest(HttpContext context)  
  10.     {  
  11.         byte[] a = null;  
  12.         string nam = context.Request.QueryString["SrNo"].ToString();  
  13.         List<ThumbNail> mylist = (List<ThumbNail>)HttpContext.Current.Session["file"];  
  14.         var byt= mylist.Where(item => item.sno == nam).Select(item => item.thumb);  
  15.         var e = byt.GetEnumerator();  
  16.         while (e.MoveNext())  
  17.         {  
  18.             a = (byte[])e.Current;  
  19.         }  
  20.         context.Response.OutputStream.Write(a, 0, a.Length);  
  21.         context.Response.Flush();  
  22.     }  
  23.     public bool IsReusable  
  24.     {  
  25.         get  
  26.         {  
  27.             return false;  
  28.         }  
  29.     }  
  30. } 

Output

Output.jpg 


Similar Articles