Dynamically generate and display Thumbnail picture by resizing the Image in ASP.Net

In this article I explain how to dynamically resize image and generate its Thumbnail and also display it on ASP.Net web page.

HTML Markup

In the form below as you can see I have 2 ASP.Net Image Controls of which one displays the original image while other displays the Thumbnail of the original image. Also there is an ASP.Net Button control which generates the Thumbnail.

 

<form id="form1" runat="server">

<asp:Image ID="Image1" runat="server" ImageUrl = "~/Jellyfish.jpg" Height = "400px" Width = "400px"/>

<br />

<asp:Button ID="btnGenerate" OnClick = "GenerateThumbnail" runat="server" Text="Generate Thumbnail" />

<hr />

<asp:Image ID="Image2" runat="server" Visible = "false"/>

</form>

 

 

using System.IO;

using System.Drawing;

using System.Drawing.Imaging;

 

Resizing Image and Generating Thumbnail

Below is the code that dynamically resizes the picture and generates the Thumbnail and also displays it in Image Control

C#

protected void GenerateThumbnail(object sender, EventArgs e)

{

    string path = Server.MapPath("~/Jellyfish.jpg");

    System.Drawing.Image image = System.Drawing.Image.FromFile(path);

    using (System.Drawing.Image thumbnail = image.GetThumbnailImage(100, 100, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero))

    {

        using (MemoryStream memoryStream = new MemoryStream())

        {

            thumbnail.Save(memoryStream, ImageFormat.Png);

            Byte[] bytes = new Byte[memoryStream.Length];

            memoryStream.Position = 0;

            memoryStream.Read(bytes, 0, (int)bytes.Length);

            string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);

            Image2.ImageUrl = "data:image/png;base64," + base64String;

            Image2.Visible = true;

        }

    }

}

 

public bool ThumbnailCallback()

{

    return false;

}

 

 In GridView As:

 

If you want to show thumbnal in girdview than;

1.  OnRowDataBound="gvEditEvents_RowDataBound"

    <asp:TemplateField HeaderText="Images">
        <ItemTemplate>
            <asp:ImageButton ID="imgBtn" AlternateText="Image" BorderWidth="1px"
                BorderColor="Black" runat="server" />                                 
        </ItemTemplate>
    </asp:TemplateField>
   
2.
    protected void gvEditEvents_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
             if ((e.Row.RowState & DataControlRowState.Edit) == 0)
                {
                    string imgPath = Convert.ToString(DataBinder.Eval(e.Row.DataItem, "ImagePathOne"));
                    if (!string.IsNullOrEmpty(imgPath))
                    {
                        ImageButton imgBtn = (ImageButton)e.Row.FindControl("imgBtn");

                        string path = Server.MapPath(imgPath.Replace("\\RootFolder", "..\\.."));
                        System.Drawing.Image image = System.Drawing.Image.FromFile(path);
                        using (System.Drawing.Image thumbnail = image.GetThumbnailImage(60, 60, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero))
                        {
                            using (MemoryStream memoryStream = new MemoryStream())
                            {
                                thumbnail.Save(memoryStream, ImageFormat.Png);
                                Byte[] bytes = new Byte[memoryStream.Length];
                                memoryStream.Position = 0;
                                memoryStream.Read(bytes, 0, (int)bytes.Length);
                                string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
                                imgBtn.ImageUrl = "data:image/png;base64," + base64String;
                                imgBtn.Visible = true;
                            }
                        }
                    }
                 }
            }
        }
      
3.

    public bool ThumbnailCallback()
    {
        return false;
    }
   
4.
   
    using System.IO;
    using System.Drawing;
    using System.Drawing.Imaging;

Cheers!!