RSS

Generate thumbnails from images in Asp.net

06 Aug

Hi,

This article very helpful for you to generate Thumbnails and also save in Directory path both Actual & thumb image.

 

Client Side:

 

 

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head id=”Head1″ runat=”server”>

<title>Generate a Thumbnails from Uploaded Image</title>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

<asp:FileUpload ID=”fileupload1″ runat=”server” />

<asp:Button ID=”btnsave” runat=”server” Text=”Upload” onclick=”btnsave_Click” />

</div>

<div>

<h1>Actual Images</h1>

<asp:DataList ID=”DataList1″ runat=”server” RepeatColumns=”3″ CellPadding=”5″>

<ItemTemplate>

<asp:Image ID=”Image1″ ImageUrl='<%# Bind(“Name”, “~/Images/{0}”) %>’ runat=”server” Height=”200px” Width=”200px” />

<br />

<asp:HyperLink ID=”HyperLink1″ Text='<%# Bind(“Name”) %>’ NavigateUrl='<%# Bind(“Name”, “~/Images/{0}”) %>’ runat=”server”/>

</ItemTemplate>

<ItemStyle BorderColor=”Brown” BorderStyle=”dotted” BorderWidth=”3px” HorizontalAlign=”Center”

VerticalAlign=”Bottom” />

</asp:DataList>

<h1>Thumbnail Images</h1>

<asp:DataList ID=”dtlist” runat=”server” RepeatColumns=”3″ CellPadding=”5″>

<ItemTemplate>

<asp:Image ID=”Image1″ ImageUrl='<%# Bind(“Name”, “~/Images/Thumbs/{0}”) %>’ runat=”server” />

<br />

<asp:HyperLink ID=”HyperLink1″ Text='<%# Bind(“Name”) %>’ NavigateUrl='<%# Bind(“Name”, “~/Images/Thumbs/{0}”) %>’ runat=”server”/>

</ItemTemplate>

<ItemStyle BorderColor=”Brown” BorderStyle=”dotted” BorderWidth=”3px” HorizontalAlign=”Center”

VerticalAlign=”Bottom” />

</asp:DataList>

</div>

</form>

</body>

</html>

 

Code Behind:

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindDataListThumbs();

BindDataList();

}

}

 

protected void BindDataListThumbs()

{

DirectoryInfo dir = new DirectoryInfo(MapPath(“Images/Thumbs”));

FileInfo[] files = dir.GetFiles();

ArrayList listItems = new ArrayList();

foreach (FileInfo info in files)

{

listItems.Add(info);

}

dtlist.DataSource = listItems;

dtlist.DataBind();

 

}

 

protected void BindDataList()

{

DirectoryInfo dir = new DirectoryInfo(MapPath(“Images”));

FileInfo[] files = dir.GetFiles();

ArrayList listItems = new ArrayList();

foreach (FileInfo info in files)

{

listItems.Add(info);

}

DataList1.DataSource = listItems;

DataList1.DataBind();

 

}

 

protected void btnsave_Click(object sender, EventArgs e)

{

 

 

string filename = Path.GetFileName(fileupload1.PostedFile.FileName);

// Save Narmal Image

fileupload1.SaveAs(Server.MapPath(“Images/” + filename));

 

string targetPath = Server.MapPath(“Images/Thumbs/” + filename);

Stream strm = fileupload1.PostedFile.InputStream;

var targetFile = targetPath;

//Based on scalefactor image size will vary

GenerateThumbnails(0.07, strm, targetFile);

BindDataListThumbs();

BindDataList();

}

private void GenerateThumbnails(double scaleFactor, Stream sourcePath, string targetPath)

{

using (var image = Image.FromStream(sourcePath))

{

var newWidth = 100; //(int)(image.Width * scaleFactor);

var newHeight = 75;// (int)(image.Height * scaleFactor);

var thumbnailImg = new Bitmap(newWidth, newHeight);

var thumbGraph = Graphics.FromImage(thumbnailImg);

thumbGraph.CompositingQuality = CompositingQuality.HighQuality;

thumbGraph.SmoothingMode = SmoothingMode.HighQuality;

thumbGraph.InterpolationMode = InterpolationMode.HighQualityBicubic;

var imageRectangle = new Rectangle(0, 0, newWidth, newHeight);

thumbGraph.DrawImage(image, imageRectangle);

thumbnailImg.Save(targetPath, image.RawFormat);

}

}

 

 

Download sample code attached

https://skydrive.live.com/?cid=FCCA6A631A7CE903&id=FCCA6A631A7CE903%21886

 

 

 

thumbnails

Advertisements
 
Leave a comment

Posted by on August 6, 2013 in ASP Dot Net C#

 

Tags: , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: