Create thumbnail image Create thumbnail image asp.net asp.net

Create thumbnail image


You have to use GetThumbnailImage method in the Image class:

https://msdn.microsoft.com/en-us/library/8t23aykb%28v=vs.110%29.aspx

Here's a rough example that takes an image file and makes a thumbnail image from it, then saves it back to disk.

Image image = Image.FromFile(fileName);Image thumb = image.GetThumbnailImage(120, 120, ()=>false, IntPtr.Zero);thumb.Save(Path.ChangeExtension(fileName, "thumb"));

It is in the System.Drawing namespace (in System.Drawing.dll).

Behavior:

If the Image contains an embedded thumbnail image, this method retrieves the embedded thumbnail and scales it to the requested size. If the Image does not contain an embedded thumbnail image, this method creates a thumbnail image by scaling the main image.


Important: the remarks section of the Microsoft link above warns of certain potential problems:

The GetThumbnailImage method works well when the requested thumbnail image has a size of about 120 x 120 pixels. If you request a large thumbnail image (for example, 300 x 300) from an Image that has an embedded thumbnail, there could be a noticeable loss of quality in the thumbnail image.

It might be better to scale the main image (instead of scaling the embedded thumbnail) by calling the DrawImage method.


The following code will write an image in proportional to the response, you can modify the code for your purpose:

public void WriteImage(string path, int width, int height){    Bitmap srcBmp = new Bitmap(path);    float ratio = srcBmp.Width / srcBmp.Height;    SizeF newSize = new SizeF(width, height * ratio);    Bitmap target = new Bitmap((int) newSize.Width,(int) newSize.Height);    HttpContext.Response.Clear();    HttpContext.Response.ContentType = "image/jpeg";    using (Graphics graphics = Graphics.FromImage(target))    {        graphics.CompositingQuality = CompositingQuality.HighSpeed;        graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;        graphics.CompositingMode = CompositingMode.SourceCopy;        graphics.DrawImage(srcBmp, 0, 0, newSize.Width, newSize.Height);        using (MemoryStream memoryStream = new MemoryStream())         {            target.Save(memoryStream, ImageFormat.Jpeg);            memoryStream.WriteTo(HttpContext.Response.OutputStream);        }    }    Response.End();}


Here is a complete example of how to create a smaller image (thumbnail). This snippet resizes the Image, rotates it when needed (if a phone was held vertically) and pads the image if you want to create square thumbs. This snippet creates a JPEG, but it can easily be modified for other file types. Even if the image would be smaller than the max allowed size the image will still be compressed and it's resolution altered to create images of the same dpi and compression level.

using System;using System.Drawing;using System.Drawing.Drawing2D;using System.Drawing.Imaging;using System.IO;//set the resolution, 72 is usually good enough for displaying images on monitorsfloat imageResolution = 72;//set the compression level. higher compression = better quality = bigger imageslong compressionLevel = 80L;public Image resizeImage(Image image, int maxWidth, int maxHeight, bool padImage){    int newWidth;    int newHeight;    //first we check if the image needs rotating (eg phone held vertical when taking a picture for example)    foreach (var prop in image.PropertyItems)    {        if (prop.Id == 0x0112)        {            int orientationValue = image.GetPropertyItem(prop.Id).Value[0];            RotateFlipType rotateFlipType = getRotateFlipType(orientationValue);            image.RotateFlip(rotateFlipType);            break;        }    }    //apply the padding to make a square image    if (padImage == true)    {        image = applyPaddingToImage(image, Color.Red);    }    //check if the with or height of the image exceeds the maximum specified, if so calculate the new dimensions    if (image.Width > maxWidth || image.Height > maxHeight)    {        double ratioX = (double)maxWidth / image.Width;        double ratioY = (double)maxHeight / image.Height;        double ratio = Math.Min(ratioX, ratioY);        newWidth = (int)(image.Width * ratio);        newHeight = (int)(image.Height * ratio);    }    else    {        newWidth = image.Width;        newHeight = image.Height;    }    //start the resize with a new image    Bitmap newImage = new Bitmap(newWidth, newHeight);    //set the new resolution    newImage.SetResolution(imageResolution, imageResolution);    //start the resizing    using (var graphics = Graphics.FromImage(newImage))    {        //set some encoding specs        graphics.CompositingMode = CompositingMode.SourceCopy;        graphics.CompositingQuality = CompositingQuality.HighQuality;        graphics.SmoothingMode = SmoothingMode.HighQuality;        graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;        graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;        graphics.DrawImage(image, 0, 0, newWidth, newHeight);    }    //save the image to a memorystream to apply the compression level    using (MemoryStream ms = new MemoryStream())    {        EncoderParameters encoderParameters = new EncoderParameters(1);        encoderParameters.Param[0] = new EncoderParameter(Encoder.Quality, compressionLevel);        newImage.Save(ms, getEncoderInfo("image/jpeg"), encoderParameters);        //save the image as byte array here if you want the return type to be a Byte Array instead of Image        //byte[] imageAsByteArray = ms.ToArray();    }    //return the image    return newImage;}//=== image paddingpublic Image applyPaddingToImage(Image image, Color backColor){    //get the maximum size of the image dimensions    int maxSize = Math.Max(image.Height, image.Width);    Size squareSize = new Size(maxSize, maxSize);    //create a new square image    Bitmap squareImage = new Bitmap(squareSize.Width, squareSize.Height);    using (Graphics graphics = Graphics.FromImage(squareImage))    {        //fill the new square with a color        graphics.FillRectangle(new SolidBrush(backColor), 0, 0, squareSize.Width, squareSize.Height);        //put the original image on top of the new square        graphics.DrawImage(image, (squareSize.Width / 2) - (image.Width / 2), (squareSize.Height / 2) - (image.Height / 2), image.Width, image.Height);    }    //return the image    return squareImage;}//=== get encoder infoprivate ImageCodecInfo getEncoderInfo(string mimeType){    ImageCodecInfo[] encoders = ImageCodecInfo.GetImageEncoders();    for (int j = 0; j < encoders.Length; ++j)    {        if (encoders[j].MimeType.ToLower() == mimeType.ToLower())        {            return encoders[j];        }    }    return null;}//=== determine image rotationprivate RotateFlipType getRotateFlipType(int rotateValue){    RotateFlipType flipType = RotateFlipType.RotateNoneFlipNone;    switch (rotateValue)    {        case 1:            flipType = RotateFlipType.RotateNoneFlipNone;            break;        case 2:            flipType = RotateFlipType.RotateNoneFlipX;            break;        case 3:            flipType = RotateFlipType.Rotate180FlipNone;            break;        case 4:            flipType = RotateFlipType.Rotate180FlipX;            break;        case 5:            flipType = RotateFlipType.Rotate90FlipX;            break;        case 6:            flipType = RotateFlipType.Rotate90FlipNone;            break;        case 7:            flipType = RotateFlipType.Rotate270FlipX;            break;        case 8:            flipType = RotateFlipType.Rotate270FlipNone;            break;        default:            flipType = RotateFlipType.RotateNoneFlipNone;            break;    }    return flipType;}//== convert image to base64public string convertImageToBase64(Image image){    using (MemoryStream ms = new MemoryStream())    {        //convert the image to byte array        image.Save(ms, ImageFormat.Jpeg);        byte[] bin = ms.ToArray();        //convert byte array to base64 string        return Convert.ToBase64String(bin);    }}

For the asp.net users a little example of how to upload a file, resize it and display the result on the page.

//== the button click methodprotected void Button1_Click(object sender, EventArgs e){    //check if there is an actual file being uploaded    if (FileUpload1.HasFile == false)    {        return;    }    using (Bitmap bitmap = new Bitmap(FileUpload1.PostedFile.InputStream))    {        try        {            //start the resize            Image image = resizeImage(bitmap, 256, 256, true);            //to visualize the result, display as base64 image            Label1.Text = "<img src=\"data:image/jpg;base64," + convertImageToBase64(image) + "\">";            //save your image to file sytem, database etc here        }        catch (Exception ex)        {            Label1.Text = "Oops! There was an error when resizing the Image.<br>Error: " + ex.Message;        }    }}