Create Thumbnail View to images in ASP.NET

Introduction

In this article, i will discuss with you how to create Thumbnail of the image in ASP.NET.Because Thumbnail is very help full , when you are upload image to server, you can preview the image.

Implementation

As per my  project, first we add four folder in root directory.the folder are,

Gallery for real image
Gallery1 for resize big image
Thumbnail for thumbnail
Thumbnail1

Note:This is only for my demo purpose, in your project can keep folders anywhere and with any name.

Place input(file) tool from HTML standard like validation standerd using id=”BrowseImage0”. the page like following,

<input id="BrowseImage0" runat="server" class="NormalTextBox"
contenteditable="false" name="BrowseImage0" style="width: 400px" type="file" />

Then place  a button,

<asp:Button ID="btn_save" runat="server" onclick="btn_save_Click"
Text="Save" />

Place label id named lblError1,

<asp:Label ID="lblError1" runat="server"></asp:Label>

Now compose the server side code,

C# Code

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.IO;
using System.Diagnostics;
using System.Drawing;
using System.Text;
using System.Net.Mail;
using System.Text.RegularExpressions;
using System.Threading;

public partial class gallery : System.Web.UI.Page
{private string Finalimagename = "";private string Finalimagename1 = "";
    System.Drawing.Image myThumbnail150;
    nsunitedsikhadmin.clsgal obj = new nsunitedsikhadmin.clsgal();
    nsunitedsikhadmin.clsgalprp objprp = new nsunitedsikhadmin.clsgalprp();
    SqlConnection con = new SqlConnection();
    SqlDataAdapter adp = new SqlDataAdapter();
    DataSet ds = new DataSet();private PagedDataSource pagedData = new PagedDataSource();protected void Page_Load(object sender, EventArgs e)
    {

    }protected void btn_save_Click(object sender, EventArgs e)
    {
        ImageUpload();

    }private void ImageUpload()
    {
        Directory.CreateDirectory(Server.MapPath("gallery\\"));
        HtmlInputFile htmlFile = (HtmlInputFile)BrowseImage0;if (htmlFile.PostedFile.ContentLength > 0)
        {string sFormat = String.Format("{0:#.##}", (float)htmlFile.PostedFile.ContentLength / 2048);if (float.Parse(sFormat) < float.Parse("2048"))
            {if (htmlFile.PostedFile != null)
                {
                    ViewState["ImageName"] = htmlFile.PostedFile.FileName.Substring(htmlFile.PostedFile.FileName.LastIndexOf("\\") + 1);//browseImagePath[0];}else{
                    ViewState["ImageName"] = "";
                }
            }else{
                lblError1.Visible = true;
                lblError1.Text = "Image Size is Large, please resize it !!";
            }
        }else{
            ViewState["ImageName"] = "";if (ViewState["ImageName"].ToString() == "")
            {
                lblError1.Visible = true;
                lblError1.Text = "Attach an image to upload";
            }return;

        }
        System.Threading.Thread.Sleep(500);
        MakeRealmage();
        MakeThumbnail();

    }public bool ThumbnailCallback()
    {return true;
    }private void MakeThumbnail()
    {object obj = new object();
        obj = BrowseImage0;
        System.Drawing.Image.GetThumbnailImageAbort myCallback = new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);
        HtmlInputFile hFile = (HtmlInputFile)obj;if (hFile.PostedFile != null && hFile.PostedFile.ContentLength > 0)
        {string imgname1 = hFile.PostedFile.FileName.Replace('%', ' ').Substring(hFile.PostedFile.FileName.LastIndexOf("\\") + 1);string imgname2 = imgname1.Replace('#', ' ').Substring(imgname1.LastIndexOf("\\") + 1);string imgname3 = imgname2.Replace('@', ' ').Substring(imgname1.LastIndexOf("\\") + 1);string imgname4 = imgname3.Replace(',', ' ').Substring(imgname1.LastIndexOf("\\") + 1);string imgname5 = imgname4.Replace('&', ' ').Substring(imgname1.LastIndexOf("\\") + 1);
            Finalimagename = imgname5.ToString();string imgname = hFile.PostedFile.FileName.Substring(hFile.PostedFile.FileName.LastIndexOf("\\") + 1);string sExtension = imgname.Substring(imgname.LastIndexOf(".") + 1);if (sExtension.ToLower() == "jpg" || sExtension.ToLower() == "gif" || sExtension.ToLower() == "bmp" || sExtension.ToLower() == "jpeg")
            {
                System.Drawing.Image imagesize = System.Drawing.Image.FromFile(ResolveUrl(Server.MapPath("gallery\\" + Finalimagename)));
                Bitmap bitmapNew = new Bitmap(imagesize);if (imagesize.Width < imagesize.Height)
                {
                    myThumbnail150 = bitmapNew.GetThumbnailImage(150 * imagesize.Width / imagesize.Height, 150, myCallback, IntPtr.Zero);
                    System.Threading.Thread.Sleep(500);
                }else{
                    myThumbnail150 = bitmapNew.GetThumbnailImage(150, imagesize.Height * 150 / imagesize.Width, myCallback, IntPtr.Zero);
                    System.Threading.Thread.Sleep(500);
                }

                Directory.CreateDirectory(Server.MapPath("thumbnail"));
                myThumbnail150.Save(ResolveUrl(Server.MapPath("thumbnail\\")) + Finalimagename, System.Drawing.Imaging.ImageFormat.Jpeg);
                System.Threading.Thread.Sleep(500);
                lbl_msg.Text = "Successfully uploaded";

            }else{
                lblError1.Visible = true;
                lblError1.Text = "Check image extension";
            }
        }
    }private void MakeRealmage()
    {object obj = new object();
        obj = BrowseImage0;
        System.Drawing.Image.GetThumbnailImageAbort myCallback = new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);
        HtmlInputFile hFile = (HtmlInputFile)obj;if (hFile.PostedFile != null && hFile.PostedFile.ContentLength > 0)
        {string imgname1 = hFile.PostedFile.FileName.Replace('%', ' ').Substring(hFile.PostedFile.FileName.LastIndexOf("\\") + 1);string imgname2 = imgname1.Replace('#', ' ').Substring(imgname1.LastIndexOf("\\") + 1);string imgname3 = imgname2.Replace('@', ' ').Substring(imgname1.LastIndexOf("\\") + 1);string imgname4 = imgname3.Replace(',', ' ').Substring(imgname1.LastIndexOf("\\") + 1);string imgname5 = imgname4.Replace('&', ' ').Substring(imgname1.LastIndexOf("\\") + 1);
            Finalimagename = imgname5.ToString();string imgname = hFile.PostedFile.FileName.Substring(hFile.PostedFile.FileName.LastIndexOf("\\") + 1);string sExtension = imgname.Substring(imgname.LastIndexOf(".") + 1);//this code is used to check image extensionif (sExtension.ToLower() == "jpg" || sExtension.ToLower() == "gif" || sExtension.ToLower() == "bmp" || sExtension.ToLower() == "jpeg")
            {
                hFile.PostedFile.SaveAs(ResolveUrl(Server.MapPath("gallery\\" + Finalimagename)));
                System.Threading.Thread.Sleep(500);
                System.Drawing.Image imagesize = System.Drawing.Image.FromFile(ResolveUrl(Server.MapPath("gallery\\" + Finalimagename)));
                Bitmap bitmapNew = new Bitmap(imagesize);if ((imagesize.Width >= 50 && imagesize.Width <= 500) && (imagesize.Height >= 50 && imagesize.Height <= 400))
                {
                    Directory.CreateDirectory(Server.MapPath("gallery1"));
                    myThumbnail150 = bitmapNew.GetThumbnailImage(150, imagesize.Height * 150 / imagesize.Width, myCallback, IntPtr.Zero);
                    myThumbnail150.Save(ResolveUrl(Server.MapPath("gallery1\\")) + Finalimagename, System.Drawing.Imaging.ImageFormat.Jpeg);
                    System.Threading.Thread.Sleep(500);
                    Finalimagename1 = Finalimagename;
                    lbl_msg.Text = "Successfully uploaded";return;
                }if (imagesize.Width < imagesize.Height)
                {
                    myThumbnail150 = bitmapNew.GetThumbnailImage(600 * imagesize.Width / imagesize.Height, 600, myCallback, IntPtr.Zero);
                    System.Threading.Thread.Sleep(500);
                }else{
                    myThumbnail150 = bitmapNew.GetThumbnailImage(600, imagesize.Height * 600 / imagesize.Width, myCallback, IntPtr.Zero);
                    System.Threading.Thread.Sleep(500);
                }

                Directory.CreateDirectory(Server.MapPath("gallery1"));
                myThumbnail150.Save(ResolveUrl(Server.MapPath("gallery1\\")) + Finalimagename, System.Drawing.Imaging.ImageFormat.Jpeg);
                System.Threading.Thread.Sleep(500);
                Finalimagename1 = Finalimagename;
                lbl_msg.Text = "Successfully uploaded";
            }else{
                lblError1.Visible = true;
                lblError1.Text = "Check image extension";

            }

        }

    }
}

 That's all.hopes help.

Conclusion

In this article, i will discussed with you how to create Thumbnail of the image in ASP.NET.