Create High Quality Thumbnail – Resize Image Dynamically – ASP .Net C# Code
This article will help you create high quality thumbnail from an image as well as resize image dynamically.
GetThumbnailImage method of class Bitmap produces a thumbnail image from the file specified. Life is so easy with it. Not always though. Sometimes the thumbnail produced has low quality – pixelated and blurred.
Why it Happens? Why My Images are Pixelated and Blurred?
Image formats like jpeg may store the thumbnail inside the same file. If we use System.Drawing.Bitmap method GetThumbnailImage, method checks if there’s a thumbnail image stored into the file and, if the thumb is found, it returns that thumbnail version scaled to the width and height you requested. If the thumbnail version of the image is smaller then the size you requested to produce, thats when problem occurs. The thumbnails produced become pixelated as we know stretching an image to a larger once reduces the Image Quality.
Solution:
Solution is really simple. We will load the source image to a System.Drawing.Image object, scale it to the desired width and height preserving good quality and save it to a new file.
Step by Step Procedure to Create a Good Quality Thumbnail:
For this example lets assume these variables
String src=”c:/myImages/a.jpg”; //absolute location of source image
String dest=”c:/myImages/a_th.jpg”; //absolute location of the new image created(thumbnail)
int thumbWidth=132; //width of the image (thumbnail) to produce
The code snippest shown here is in ASP .NET C#.
You have to use these namespaces
using System.Drawing;
using System.Drawing.Drawing2D;
Following are the Steps along with example code:
- Get the source image to a System.Drawing.Image object
System.Drawing.Image image = System.Drawing.Image.FromFile(src);
- Create a System.Drawing.Bitmap with the desired width and height of the thumbnail.
int srcWidth=image.Width;
int srcHeight=image.Height;
//we will get the sizeratio in decimal so that we dont get exception in case width is less then height.
Decimal sizeRatio = ((Decimal)srcHeight/srcWidth);
int thumbHeight=Decimal.ToInt32(sizeRatio*thumbWidth);
Bitmap bmp = new Bitmap(thumbWidth, thumbHeight);
- Create a System.Drawing.Graphics object from the Bitmap which we will use to draw the high quality scaled image
System.Drawing.Graphics gr = System.Drawing.Graphics.FromImage(bmp);
- Set the System.Drawing.Graphics object property SmoothingMode to HighQuality
gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
- Set the System.Drawing.Graphics object property CompositingQuality to HighQuality
gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
- Set the System.Drawing.Graphics object property InterpolationMode to High
gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
- Draw the original image into the target Graphics object scaling to the desired width and height
System.Drawing.Rectangle rectDestination = new System.Drawing.Rectangle(0, 0, thumbWidth, thumbHeight);
gr.DrawImage(image, rectDestination, 0, 0, srcWidth, srcHeight, GraphicsUnit.Pixel);
- Save to destination file
bmp.Save(dest);
- dispose / release resources
bmp.Dispose();
image.Dispose();
Lets help each other:
I get emails often asking for help with the code. I always love to do that. Unfortunately sometimes I get too busy. I have a full-time job, maintain two sites, and married. If you have problems with this code, please post on the comment. I would reply as soon as I can. Anybody interested helping others may reply on the comments as well.
(10 votes, average: 4.10 out of 5)
Loading ...
Hi Sir,
Thaks for your codings.I had implemented it
thank you so much
Regards
Helped me a lot.
Thank you!
Best regards.
really useful post
Your code is really amazing code to generate high quality thumbnails. But i got a problem if i use
context.Response.ContentType = “image/Jpeg”;
bitmap.Save(context.Response.OutputStream, ImageFormat.Jpeg);
Images are still blurred i can send you the code if these line supports your code.
Please reply as soos as possible.
Thanx
@Amit What if you don’t use the ImageFormat.Jpeg on the bmp.Save? Please try that one. If it doesn’t work feel free to post the code here, I would take a look.
Thanx for your reply manik but i have already tried it without using ImageFormat.Jpeg but still the problem persist. But atlast i get a solution after some brainstorming, i tried the Codec and eParams parameter of bitmap.save and get done….here is the code i have added in your original code…
System.Drawing.Image image;
image = System.Drawing.Image.FromFile(_path);
int srcWidth = image.Width;
int srcHeight = image.Height;
/* explicity supply the thumbnail height and width so commented the code.
// if(srcHeight>srcWidth)
// thumbHeight=(srcHeight/srcWidth)*thumbWidth;
// else
// thumbHeight=(srcWidth/srcHeight)*thumbWidth;
System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(thumbWidth, (int)thumbHeight);
//- Create a System.Drawing.Graphics object from the Bitmap which we will use to draw the high quality scaled image
System.Drawing.Graphics gr = System.Drawing.Graphics.FromImage(bitmap);
//- Set the System.Drawing.Graphics object property SmoothingMode to HighQuality
gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
//- Set the System.Drawing.Graphics object property CompositingQuality to HighQuality
gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
//- Set the System.Drawing.Graphics object property InterpolationMode to High
gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
//- Draw the original image into the target Graphics object scaling to the desired width and height
System.Drawing.Rectangle rectDestination = new System.Drawing.Rectangle(0, 0, thumbWidth, (int)thumbHeight);
//Set Image codec of JPEG type, the index of JPEG codec is “1″
System.Drawing.Imaging.ImageCodecInfo codec = System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders()[1];
//Set the parameters for defining the quality of the thumbnail… here it is set to 100%
System.Drawing.Imaging.EncoderParameters eParams = new System.Drawing.Imaging.EncoderParameters(1);
eParams.Param[0] = new System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
gr.DrawImage(image, rectDestination, 0, 0, srcWidth, srcHeight, System.Drawing.GraphicsUnit.Pixel);
bitmap.Dispose();
image.Dispose();
awesome post man really gr8 code for thumbnail i need it badly.
fantastic tumbs up…
Leave your response!
Categories
Most Commented
Recent Comments
Blogroll
Most Viewed