How to Save Image in Different Size in Asp.net

Introduction:-

                     This article explains how to create a image with different size in asp.net.

Description:-

                     In my previous post How to Upload and Save Image Without any Postback by User in Asp.net ,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', e.target.result);

$('#ImgUser').attr('src', e.target.result);

$('#<%=hdnImg.ClientID %>').val(e.target.result);

 

 

};

reader.readAsDataURL(file);

 

}

}

 

</script>

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/";

try

{

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 ="http://www.dotnetocean.com/UserImage/" + 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