Thumbnail Images in GridView using C#

• Download CreateThumbnailImage.zip - 564.8 KB

Introduction

ASP.Net have the gridview which is very usefull to display such kind of some datas or images like this. Here is I'm going to display images which are in a folder with thumbnail size.

Thumbnail Image

(First of all I need a support page which is create thumbnail image. Here is I'm working with imageresize.cs. This file will help you for creating thumbnail images.

ImageResize class have some functionalities for creating thumbnail images. I'm creating thumbnail images and write the image in that supporting page. In my image viewer page I have created a grid view and give the supporting page as resolving url in every images contain's in that appropriate folder.

Using the code

In my image viewer page

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            bindData();
    }


private void bindData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("S.No", typeof(string));
        dt.Columns.Add("grdImage", typeof(string));
        DataRow dr;
        int i = 1;
        foreach (string file in Directory.GetFiles(Server.MapPath("Images")+"\\","*.jpg"))
        {
            dr = dt.NewRow();
            dr[0] = i.ToString();
            dr[1] = ResolveUrl("ThumbnailCreator.aspx?ImageId="+file);
            dt.Rows.Add(dr);
            i += 1;
        }
        grdImageViewer.DataSource = dt;
        grdImageViewer.DataBind();
    }

From this above code I'm searching images with .jpg extension in the Images folder. I'm putting row number for every image and binding the thumbnail image from ThumbnailCreator.aspx page for the appropriate image.

In ThumbnailCreator page,

protected void Page_Load(object sender, EventArgs e)
    {
        string imgPath;
        if (Request.QueryString["ImageId"] != null)
        {
            if (!string.IsNullOrEmpty(Request.QueryString["ImageId"].ToString()))
            {
                imgPath = Request.QueryString["ImageId"].ToString();
                if (!string.IsNullOrEmpty(imgPath))
                {
                    byte[] imgByte = GetImageByteArr(new Bitmap(imgPath));
                    MemoryStream memoryStream = new MemoryStream();
                    memoryStream.Write(imgByte, 0, imgByte.Length);
                    System.Drawing.Image imagen = System.Drawing.Image.FromStream(memoryStream);
                    Response.ContentType = "image/Jpeg";
                    ImageResize ir = new ImageResize();
                    ir.File = imagen;
                    ir.Height = 60;
                    ir.Width = 60;
                    ir.GetThumbnail().Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
                }
            }
        }
    }

converting image to byte array

 private static byte[] GetImageByteArr(System.Drawing.Image img)
    {
        byte[] ImgByte;
        using (MemoryStream stream = new MemoryStream())
        {
            img.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);
            ImgByte = stream.ToArray();
        }
        return ImgByte;
    }

From above,the query string will be come with the path of image which is to be conver to thumbnail image. I'm creating thumbnail page using ImageResize.cs. See the ImageResize.cs file in app_code. Thumbnail image is writing in page using Response.OutputStream.

Response type is "image/Jpeg". It's must for image. This will help to write in page as jpeg file.

Hence the Image has been created thumbnail image and displayed in a gridview.