Introduction
Here I will explain how to resize an image without losing any quality from uploaded images using asp.net.
Description:
In previous post I explained clearly how to generate the thumbnails dynamically. Here I am using same concept to resize the image without losing quality just by changing scaling factor in previous post. In social networking sites after upload images they will reduce the size of the photo but the quality will be same after seen that I tried to write this post. I taken one of my pic that pic size is 3.62 MB before resize Image that is here
 |
Now I am trying to resize above image For that first create one new website after that right click on that website select New Folder give name as Images because here I am using same name if you want to use another name you need to change the name in code also. After completion of adding Images folder to your website Design your aspx page like this
<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="dtlist" runat="server" RepeatColumns="3" CellPadding="5"> <ItemTemplate> <asp:Image ID="Image1" ImageUrl='<%# Bind("Name", "~/Images/{0}") %>' 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> |
After that add following namespaces in code behind
using System.Collections; using System.Drawing; using System.Drawing.Drawing2D; using System.IO; |
After completion of adding namespaces write the following code
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindDataList(); } } 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); } dtlist.DataSource = listItems; dtlist.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); } } |
After completion of above run your application and upload one image and check the size of image after resize and before resize you will find huge difference in size but quality will be same as original one.
After run my application I upload above pic to resize after completion process my pic size reduces drastically to 218 KB do you believe this but it’s true we can reduce image size as much as possible by using above code without losing quality of image and my image quality same as original one check it
 |
Download sample code attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
28 comments :
how to do it without fileupload ? i mean i want to resize an specified image, then i am getting stream error, please help
Hi ,
i think that error because of your not passing correct image path that's why your getting that error. Here i am passing the imagepath by using the upload control. Please check your image whether your passing correct value or not
i am passing correct value but i am getting problem because i have path in a string, i need to convert this string into inputstream or stream and i tried with several way but its still error just because of stream, please help
can you provide code to my email id ?
copland.adam@yahoo.com
Awesome!!!!Thanks a ton!!!You solved a weeks hunt for the code!!!!
Image.FromStream doesn't exist? Can you help me out with this?
Image class present in two namespaces 'System.Web.UI.WebControls' and 'System.Drawing'.That's why you are getting Image.FromStream doesn't exist. To solve this write System.Drawing.Image.FromStream.
thanks alot for such nice task,cud u plz tell me that how could i create a thumnail for a video...my task is i just want to show something(thumbnail or screenshot) of the uploaded video on server(not from youtube,vimeo url)??
how about change image sizeand maintian same height and width to display it again with old width and heigh and new size
Thank You...
This is nice code , But I found it checks each image before uploading. For example if we are uploading image in Demo folder and demo folder contains 90 images. Your code checks 90 times and then load image . How this work if we are having a lot of images in server???? Please sort this
kumawat.ban@gmail.com
Nice code !!
w3services.net
Image.FromStream doesn't exist? please resolve this error.
replace Image.FromStream to System.Drawing.Image.FromStream to remove the Stream error.
I got it.
Thanks for this post.
I'm facing this error..A generic error occurred in GDI+
need help urgently i have created a gallery in asp.net in which images are retrieving from database n have used listview control to call them now i have 2 enlarge the images on mouseover buh failed to do so..
When we upload images with size more than 4mb then it doesn't work..
nice code....thanks....
thanks and keep it up
u r helping a lot of peoples
anonymous, my friend
use this to upload images more than 4mb.
"
"
put this code in your web.config file in tag
httpRuntime executionTimeout="9999" maxRequestLength="2097151"/
system.web
hi suresh.....
hey, i am crating a small website...
and i have to create a chat application in my project, bt cant create it,
i had find many ways bt i cant success,
but if have any solution then send me plz.....
thanku bhai
thanku bhai
kmt
A generic error occurred in GDI+.
Code working on local system but once uploaded to shared hosting server its giving error please help me
I'm facing this error..A generic error occurred in GDI+
Answer : Give Read & Write Permission on folder which u upload image.