Introduction
In this article I will explain about how to resize image without its quality Loss using Asp.Net. In my previous article I talked about Insert Image In Folder And Display from Folder To DataList Using Asp.Net. And now this article one step forward from last.
Description
Create New-WebSite and then select a New-Folder name it as Images.Go to Solution Explorer click on Add and add a New WebForm in your application. Now use following code on your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<asp:DataList ID="dlImageResize" runat="server" RepeatColumns="3" CellPadding="5">
<ItemTemplate>
<asp:Image ID="Image1" ImageUrl='<%# Bind("Name", "~/Images/{0}") %>' Width="110px" Height="100px" runat="server" />
<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>
</div>
</form>
</body>
</html>
Right click on aspx page and Click on View Code. Use following code on Code-behind Window
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDataList();
}
}
protected void BindDataList()
{
DirectoryInfo dirInfo = new DirectoryInfo(MapPath("Images"));
FileInfo[] files = dirInfo.GetFiles();
ArrayList listItems = new ArrayList();
foreach (FileInfo info in files)
{
listItems.Add(info);
}
dlImageResize.DataSource = listItems;
dlImageResize.DataBind();
}
protected void btnsave_Click(object sender, EventArgs e)
{
string filename = Path.GetFileName(fileupload1.PostedFile.FileName);
string targetPath = Server.MapPath("Images/" +
filename);
Stream strm = fileupload1.PostedFile.InputStream;
var targetFile = targetPath;
//Based
on scalefactor image size will vary
GenerateThumbnails(0.5, strm,
targetFile);
BindDataList();
}
private void GenerateThumbnails(double scaleFactor, Stream sourcePath, string targetPath)
{
using (var image = Image.FromStream(sourcePath))
{
var newWidth = (int)(image.Width * scaleFactor);
var newHeight = (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);
}
}
By using this code you can reduce your image size upto 80% .I uploaded a image size of aprox 3MB using FileUpload and after click on Upload button it saves on Images folder and size changed to 268Kb. Unbelievable but its true. Hope you enjoy the code.
0 comments:
Post a Comment