Thursday, April 18

How to Save Image in Different Size in

                     This article explains how to create a image with different size in
                     In my previous post How to Upload and Save Image Without any Postback by User in ,I have explained on image file validation check in javascript as well as instantly reading the image after selecting from dialog box.Here I am going to explain how you can store that same image in different sizes.
                   You have to specify some unit to store image in different sizes.As I have explained before you have to take one image upload control and one image viewer control.There is so many different approach is there to do this work but I am providing code which is very simple to implement as well as light weight than other approaches.

Follow the below steps to get the result.
Here is my file Upload control:-
<input type="file" id="img_Upload" name="img_Upload" onchange="ReadImage(this);" />
<asp:Image ID="ImgUser" Height="171px" Width="153px" ImageUrl="~/UserImage/default_user.jpg" runat="server"></asp:Image>
When you will choose the image it will directly reflect to Image control ,for this i have written one javascript function as ReadImage .Here is the function
<script type="text/javascript">
function CheckFileType() {
var filenm = $("#img_Upload").val();
if (filenm.lastIndexOf('.')&& filenm.length > 5)
filenm = filenm.substring(filenm.lastIndexOf('.'), filenm.length).toLowerCase().trim();
if (filenm != ".jpeg"&& filenm != ".jpg"&&filenm != ".gif"&& filenm != ".png") {
//Provide any valid message here
alert('Invalid Image Format');
return false
return true;
function ReadImage(input) {
 //first it will check the file type ,then it will read the file.
if (CheckFileType()) {
var file = input.files[0];
var reader = new FileReader();
reader.onload = function (e) {
$('#<%=ImgUser.ClientID %>').attr('src',;
$('#<%=hdnImg.ClientID %>').val(;
Now Here is my code behind to save the image in your folder ,I have two folder one is UserImage
and Another one is Thumbnail inside application folder UserImage .
Here is the code behind method:-
private void SaveImage()
string imagename = string.Empty;
string UserImage = Server.MapPath("~/") + "UserImage/";
string thumb = Server.MapPath("~/") + "UserImage/Thumbnail/";
HttpPostedFile fupload = Request.Files["img_Upload"];
//byte[] decodedData = base64Decode(hdnImg.Value);
imagename = Guid.NewGuid().ToString();
//System.IO.File.WriteAllBytes(Server.MapPath("~/Temp1/" + imagename + ".jpeg"), decodedData);
Session["UserImage"] = imagename + ".jpeg";
Bitmap source = (Bitmap)Bitmap.FromStream(fupload.InputStream);
//You can use the commented code also for providing a temp folder
//.FromFile(Server.MapPath("~/Temp1/" + imagename + ".jpeg"));
Bitmap bmpProfileImage = new System.Drawing.Bitmap(171, 153);
//This will create small image as 30*30
Bitmap ThumbNail = new System.Drawing.Bitmap(30, 30);
Graphics g1 = Graphics.FromImage(bmpProfileImage);
g1.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g1.FillRectangle(System.Drawing.Brushes.White, 0, 0, 100, 100);
g1.DrawImage(source, 0, 0, 171, 153);
Graphics g = Graphics.FromImage(ThumbNail);
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.FillRectangle(System.Drawing.Brushes.White, 0, 0, 100, 100);
g.DrawImage(source, 0, 0, 30, 30);
// string saveImagePath = "EDAU/UserImage/Thumbnail/" + imagename + ".jpeg";
string saveImagePath = thumb + imagename + ".jpeg";
//Here the thumbnail image will be store inside your destination path
ThumbNail.Save(saveImagePath, ImageFormat.Jpeg);
//saveImagePath ="" + imagename + ".jpeg";
string saveImagePath2 = UserImage + imagename + ".jpeg";
//It will store the big image inside given folder path
bmpProfileImage.Save(saveImagePath2, ImageFormat.Jpeg);
g1.Dispose(); g.Dispose(); bmpProfileImage.Dispose(); ThumbNail.Dispose();
//If you are using the temp folder then you have to delete that temp file after completing the process.for this you have to uncomment the following code.
//File.Delete(Server.MapPath("~/Temp1/" + imagename + ".jpeg"));
catch (Exception ex)
{ }
//You can use the following method to decode your image path ,I am not going to use this method for this approach but if you want to use then you can. 
//base64Decode this method is not used in this scenario
public static byte[] base64Decode(string data)
char[] ch = { ':', ',' };
string[] d = data.Split(ch);
return Convert.FromBase64String(d[2]);
From this article you found that we can do this in two different approach.If you are still have some doubt,then you can ask me directly through comment.
Happy Coding....
Thanks Shibashish Mohanty

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

shibashish mohanty