How to create thumbnail, small and large version of the uploaded image in Asp.net?

Description: While working on asp.net application it is sometimes required to createthumbnail, small and large version of the image as per application requirement. Suppose there is image upload functionality in your website where user can upload their pictures and you want to store and display thumbnail, small and large version of the uploaded image. Here is the solution.

Implementation: Let's create an asp.net website to see the example in action.

Source Code:

• In the design page (.aspx) place a FileUpload Control and a Button control as:

<table>

        <tr>

                <td>

                    <asp:FileUpload ID="FileUpload1" runat="server" />

                </td>

            </tr>

            <tr>

                <td>

                      <asp:Button ID="btnUpload" runat="server" Text="Submit"

            onclick="btnUpload_Click" /></td>

          </tr>          

  </table>

• Create a folder “images” and three sub folder “thumbnail”, “small” and “large” inside the folder “images”.

C#.NET Code to create thumbnail, small and large version of the uploaded image

• In the code behind file (.aspx.cs) write the code as:

First Include following namespaces:

using System.Drawing;

using System.Drawing.Drawing2D;

using System.Drawing.Imaging;

using System.Drawing.Design;

using System.IO;

• Then write the code as:

protected void btnUpload_Click(object sender, EventArgs e)

    {

        if (FileUpload1.HasFile)

        {

            string imgThumb = string.Empty;

            string imgSmall = string.Empty;

            string imgLarge = string.Empty;

            Bitmap bmpImgThumb = null;

            Bitmap bmpImgSmall = null;

            Bitmap bmptImgLarge = null;

            try

            {

                bmpImgThumb = Resize_Image(FileUpload1.PostedFile.InputStream, 100, 67);

                bmpImgSmall = Resize_Image(FileUpload1.PostedFile.InputStream, 411, 274);

                bmptImgLarge = Resize_Image(FileUpload1.PostedFile.InputStream, 1280, 854);

                imgThumb = Server.MapPath("images/thumbnail/") + Guid.NewGuid().ToString() + ".png";

                imgSmall = Server.MapPath("images/small/") + Guid.NewGuid().ToString() + ".png";

                imgLarge = Server.MapPath("images/large/") + Guid.NewGuid().ToString() + ".png";

                bmpImgThumb.Save(imgThumb, ImageFormat.Jpeg);

                bmpImgSmall.Save(imgSmall, ImageFormat.Jpeg);

                bmptImgLarge.Save(imgLarge, ImageFormat.Jpeg);

            }

            catch (Exception ex)

            {

                Response.Write("Error occured: " + ex.Message.ToString());              

            }

            finally

            {

                imgThumb = string.Empty;

                imgSmall = string.Empty;

                imgLarge = string.Empty;

                bmpImgThumb.Dispose();

                bmpImgSmall.Dispose();

                bmptImgLarge.Dispose();

            }

        }

    }

    private Bitmap Resize_Image(Stream streamImage, int maxWidth, int maxHeight)

    {

        Bitmap originalImage = new Bitmap(streamImage);

        int newWidth = originalImage.Width;

        int newHeight = originalImage.Height;

        double aspectRatio = Convert.ToDouble(originalImage.Width) / Convert.ToDouble(originalImage.Height);

        if (aspectRatio <= 1 && originalImage.Width > maxWidth)

        {

            newWidth = maxWidth;

            newHeight = Convert.ToInt32(Math.Round(newWidth / aspectRatio));

        }

        else if (aspectRatio > 1 && originalImage.Height > maxHeight)

        {

            newHeight = maxHeight;

            newWidth = Convert.ToInt32(Math.Round(newHeight * aspectRatio));

        }

        return new Bitmap(originalImage, newWidth, newHeight);

    }