Introduction:-
This
tutorial will show you how to generate image thumbnails dynamically from an
original big image.
Background:-
Many of the
web developers will show the big images as small by giving the attribute values
for the image tag. This will slow down
the webpage loading. For better
performance the best method is creating the small thumbnail images for showing
small size image on the web pages. But
for every upload of the images by the user we cannot create a thumbnail image,
it’s a tedious process. I planed to
create a method which will create a thumbnail automatically while the image
upload and saves in a separate path. This
is a light weight process and easy to use.
The only thing is you have to add one more filed for saving the
thumbnail image path while dealing with databases.
Following are the features of this technique.
- Good Quality.
- Desired thumbnail size.
Using the code:-
Below is
the method which will generates the thumbnail and saves to the destination
folder.
public void GenerateThumbNail(string
sourcefile, string destinationfile,int width)
{
System.Drawing.Image
image = System.Drawing.Image.FromFile(Server.MapPath(sourcefile));
int
srcWidth = image.Width;
int
srcHeight = image.Height;
int
thumbWidth = width;
int
thumbHeight;
Bitmap
bmp;
if
(srcHeight > srcWidth)
{
thumbHeight = (srcHeight /
srcWidth) * thumbWidth;
bmp = new
Bitmap(thumbWidth, thumbHeight);
}
else
{
thumbHeight = thumbWidth;
thumbWidth = (srcWidth / srcHeight)
* thumbHeight;
bmp = new
Bitmap(thumbWidth, thumbHeight);
}
System.Drawing.Graphics
gr = System.Drawing.Graphics.FromImage(bmp);
gr.SmoothingMode =
System.Drawing.Drawing2D.SmoothingMode.HighQuality;
gr.CompositingQuality =
System.Drawing.Drawing2D.CompositingQuality.HighQuality;
gr.InterpolationMode =
System.Drawing.Drawing2D.InterpolationMode.High;
System.Drawing.Rectangle
rectDestination = new System.Drawing.Rectangle(0, 0, thumbWidth, thumbHeight);
gr.DrawImage(image, rectDestination, 0,
0, srcWidth, srcHeight, GraphicsUnit.Pixel);
bmp.Save(Server.MapPath(destinationfile));
bmp.Dispose();
image.Dispose();
}
In the above method we are passing three parameters
first one is the soruce location of the image and the second one is the
destination location of the image and the third parameter is the width. At first we need to include two namespaces
using
System.Drawing;
using
System.Drawing.Drawing2D;
Then create an instance image from
the source file as follows
System.Drawing.Image image
= System.Drawing.Image.FromFile(Server.MapPath(sourcefile));
After
getting the image height and width using the instance of the image we need to
set the targetted thumbnail image’s height and width. Create and instance for
the bitmap. By using the below logic we
can get the width and height of the targetted thumbnail. Set the thumbnails’s width and height to the
bitmap.
Bitmap bmp;
if
(srcHeight > srcWidth)
{
thumbHeight = (srcHeight /
srcWidth) * thumbWidth;
bmp = new
Bitmap(thumbWidth, thumbHeight);
}
else
{
thumbHeight = thumbWidth;
thumbWidth = (srcWidth / srcHeight)
* thumbHeight;
bmp = new
Bitmap(thumbWidth, thumbHeight);
}
After
this for creating the high quality thumbnails create an instance for the
Graphics class with the bitmap. Set the
SmoothingMode and CompositingQuality to HighQuality and InterpolationMode to
Hign. Then draw a rectangle with the
thumbnail’s height and width using the rectangle class and place the image
inside the rectangle using the DrawImage class.
Now the bitmap image i.e., thumbnail image is ready. Now save the thumbnail the the destination
location using bmp.save(/*destination location*/) method.
I think mostly this example will help in website
development for loading webpages fast with small images instead of loading
large image with small sizes.
