I'm looking for a simple explanation/example code on how to resize and optimise an image before uploading/storing on the server.
I know how to upload an image that is saved to a directory on the server, but I want to only save a resized/optimised version so it doesn't use up loads of hard drive space, can anyone show me how this is done.
Many thanks!
Kind regards,
M.
"Life is only a dream and we are the imagination of ourselves."
by Bill Hicks
Thanks for the reply, the first article was good, but the 4guysfromrolla article was all written in VB.NET and I need C# examples, secondly the article only shows how to resize an image on the fly and display in the calling web form.
Is there no way to resize an image and save a copy of the resized version on the server (so when giving a user the ability to upload an image, only the resized thumbnail version is uploaded to the server and the original large photo is discarded once the
thumbnail is generated).
Kind regards,
M.
"Life is only a dream and we are the imagination of ourselves."
by Bill Hicks
Just to re-iterate that I still need to find a solution where by when uploading an image, before the image is saved to the server it is resized so only the resized thumbnail version of the image is uploaded to the server and the original large photo is discarded
once the thumbnail is generated and saved.
Hope that makes sense.
Any help appreciated.
M.
"Life is only a dream and we are the imagination of ourselves."
by Bill Hicks
OK, this code assumes that the bitmap width is always 100 pixels, and that the height adjusts accordingly (to maintain aspect ratio). Since you obviously have your own code in place already, you may use that instead of mine. However, the important part is
that the FileUpload1 control is the FileUpload control that contains the uploaded image... This code will resize the large bitmap and save only the resized version while discarding the uploaded image after processing:
{
string fName;
string trgDir;
fName = FileUpload1.FileName;
fName = Strings.LCase(fName);
trgDir = Server.MapPath("~/upload/images/public") + "\\";
//
// We now create an instance of the original bitmap and retrieve
// its dimensions in order to calculate the aspect ratio. We then
// fix the thumbnail width at 100 pixels and set the height
// according to the aspect ratio, which means that the height may
// vary but the width is always 100 pixels for the thumbnail.
//
System.Drawing.Bitmap origBMP = new System.Drawing.Bitmap(FileUpload1.FileContent());
int origWidth = origBMP.Width;
int origHeight = origBMP.Height;
float sngRatio = origWidth / origHeight;
int newWidth = 100;
int newHeight = newWidth / sngRatio;
System.Drawing.Bitmap newBMP = new System.Drawing.Bitmap(origBMP, newWidth, newHeight);
Drawing.Graphics objGra = Drawing.Graphics.FromImage(newBMP);
//
// The new file should now be saved to the public portion of
// the web site.
//
objGra.SmoothingMode = Drawing.Drawing2D.SmoothingMode.AntiAlias;
objGra.InterpolationMode = Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
objGra.DrawImage(origBMP, 0, 0, newWidth, newHeight);
newBMP.Save(trgDir + "tn_" + fName);
//
// Now, that we are done with the bitmap objects, we deallocate
// them.
//
origBMP = null;
newBMP = null;
objGra = null;
}
I've pasted all my codefile below, but just to let you know I hit the following problems....
<div mce_keep="true">The line "fName = Strings.LCase(fName);" was causing a problem - because of the
Strings section, I tried changing it to
String but that didn't work so I removed it.
</div>
<div mce_keep="true">I had to change "float sngRatio = origWidth / origHeight;" to "int sngRatio = origWidth / origHeight;" because apparently
the Bitmap() method only excepts integers in its arguments (as well as the line "int newHeight = newWidth / sngRatio;" couldn't convert a
float to an
int).
</div>
<div mce_keep="true">The line "Drawing.Graphics objGra = Drawing.Graphics.FromImage(newBMP);" is still currently displaying the following error message...
CS0246: The type or namespace name 'Drawing' could not be found (are you missing a using directive or an assembly reference?)
...but I'm already importing the classes (Drawing, Drawing.Drawing2D, Drawing.Imaging).</div>
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.IO; // this is for the file upload
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
public partial class GDI_UploadImage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//
}
protected void UploadFile(Object s, EventArgs e)
{
string fName;
string trgDir;
fName = fileUpload.FileName;
//fName = Strings.LCase(fName);
trgDir = Server.MapPath("~/upload/images/public") + "\\";
// We now create an instance of the original bitmap and retrieve
// its dimensions in order to calculate the aspect ratio. We then
// fix the thumbnail width at 100 pixels and set the height
// according to the aspect ratio, which means that the height may
// vary but the width is always 100 pixels for the thumbnail.
System.Drawing.Bitmap origBMP = new System.Drawing.Bitmap(fileUpload.FileContent);
int origWidth = origBMP.Width;
int origHeight = origBMP.Height;
int sngRatio = origWidth / origHeight;
int newWidth = 100;
int newHeight = newWidth / sngRatio;
System.Drawing.Bitmap newBMP = new System.Drawing.Bitmap(origBMP, newWidth, newHeight);
Drawing.Graphics objGra = Drawing.Graphics.FromImage(newBMP);
// The new file should now be saved to the public portion of the web site.
objGra.SmoothingMode = Drawing.Drawing2D.SmoothingMode.AntiAlias;
objGra.InterpolationMode = Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
objGra.DrawImage(origBMP, 0, 0, newWidth, newHeight);
newBMP.Save(trgDir + "tn_" + fName);
// Now, that we are done with the bitmap objects, we deallocate them.
origBMP = null;
newBMP = null;
objGra = null;
}
}
"Life is only a dream and we are the imagination of ourselves."
by Bill Hicks
OK, my bad ... I should probably have tested the code before posting it. The thing is, it was written in VB and taken from a project I did a long time ago... I ran it through the VB.NET to C# translator and thought that might be OK... I must have been too
quick when I took out the portions that I thought relevant.
Anyway ... the idea was to create a new bmp in memory right from the FileUpload control and then only save the resized image, like you wanted. So, I figured, that since you already had your own code (for the resizing itself), mine wouldn't
be too important.
Incidentally, just in case you are not aware of it, this tool can be a help when you have VB.NET code that you want to see as C#:
Apologies for the slow reply, I've been manically busy at work.
After realising that you had used a code converter to create your example code, I went through it ruthlessly and removed everything that didn't make sense with regards to C# code and managed to get the code to work!
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.IO; // this is for the file upload
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
public partial class GDI_UploadImage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//
}
protected void UploadFile(Object s, EventArgs e)
{
if (fileUpload.HasFile)
{
// Find the fileUpload control
string filename = fileUpload.FileName;
// Specify a upload directory
string directory = Server.MapPath(@"Uploaded-Files\");
// Create a bitmap in memory of the content of the fileUpload control
Bitmap originalBMP = new Bitmap(fileUpload.FileContent);
// Calculate the new image dimensions
int origWidth = originalBMP.Width;
int origHeight = originalBMP.Height;
int sngRatio = origWidth / origHeight;
int newWidth = 100;
int newHeight = newWidth / sngRatio;
// Create a new bitmap which will hold the previous resized bitmap
Bitmap newBMP = new Bitmap(originalBMP, newWidth, newHeight);
// Create a graphic based on the new bitmap
Graphics oGraphics = Graphics.FromImage(newBMP);
// Set the properties for the new graphic file
oGraphics.SmoothingMode = SmoothingMode.AntiAlias;
oGraphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
// Draw the new graphic based on the resized bitmap
oGraphics.DrawImage(originalBMP, 0, 0, newWidth, newHeight);
// Save the new graphic file to the server
newBMP.Save(directory + "tn_" + filename);
// Once finished with the bitmap objects, we deallocate them.
originalBMP = null;
newBMP = null;
oGraphics = null;
// Write a message to inform the user all is OK
label.Text = "File <b style='color: red;'>" + filename + "</b> uploaded.";
// Display the image to the user
Image1.ImageUrl = @"/Learning 2.0/Uploaded-Files/tn_" + filename;
}
else
{
label.Text = "No file uploaded!";
}
}
}
Thanks Herluf :)
Kind regards,
M.
"Life is only a dream and we are the imagination of ourselves."
by Bill Hicks
OK, I ran your C# code through that VB.NET converter and compared it to my orignal code ... it seems to do the same thing the original code does, although a few variables have changed names and minor things like that.
Anyway, I am glad to hear that you got it working. [Yes]
.NET
Member
10 Points
57 Posts
Resizing/Optimising and image
Jan 21, 2008 08:42 AM|LINK
Hi,
I'm looking for a simple explanation/example code on how to resize and optimise an image before uploading/storing on the server.
I know how to upload an image that is saved to a directory on the server, but I want to only save a resized/optimised version so it doesn't use up loads of hard drive space, can anyone show me how this is done.
Many thanks!
Kind regards,
M.
by Bill Hicks
vik20000in
All-Star
25882 Points
3993 Posts
MVP
Re: Resizing/Optimising and image
Jan 21, 2008 09:03 AM|LINK
These article talks on thumbnailing the image
http://www.csharp-station.com/Articles/Thumbnails.aspx
http://aspnet.4guysfromrolla.com/articles/012203-1.2.aspx
www.vikramlakhotia.com
Please mark the answer if it helped you
.NET
Member
10 Points
57 Posts
Re: Resizing/Optimising and image
Jan 23, 2008 08:25 PM|LINK
Hi,
Thanks for the reply, the first article was good, but the 4guysfromrolla article was all written in VB.NET and I need C# examples, secondly the article only shows how to resize an image on the fly and display in the calling web form.
Is there no way to resize an image and save a copy of the resized version on the server (so when giving a user the ability to upload an image, only the resized thumbnail version is uploaded to the server and the original large photo is discarded once the thumbnail is generated).
Kind regards,
M.
by Bill Hicks
.NET
Member
10 Points
57 Posts
Re: Resizing/Optimising and image
Jan 31, 2008 04:36 PM|LINK
Just to re-iterate that I still need to find a solution where by when uploading an image, before the image is saved to the server it is resized so only the resized thumbnail version of the image is uploaded to the server and the original large photo is discarded once the thumbnail is generated and saved.
Hope that makes sense.
Any help appreciated.
M.
by Bill Hicks
Herluf
Member
218 Points
64 Posts
Re: Resizing/Optimising and image
Feb 07, 2008 05:32 PM|LINK
OK, this code assumes that the bitmap width is always 100 pixels, and that the height adjusts accordingly (to maintain aspect ratio). Since you obviously have your own code in place already, you may use that instead of mine. However, the important part is that the FileUpload1 control is the FileUpload control that contains the uploaded image... This code will resize the large bitmap and save only the resized version while discarding the uploaded image after processing:
{ string fName; string trgDir; fName = FileUpload1.FileName; fName = Strings.LCase(fName); trgDir = Server.MapPath("~/upload/images/public") + "\\"; // // We now create an instance of the original bitmap and retrieve // its dimensions in order to calculate the aspect ratio. We then // fix the thumbnail width at 100 pixels and set the height // according to the aspect ratio, which means that the height may // vary but the width is always 100 pixels for the thumbnail. // System.Drawing.Bitmap origBMP = new System.Drawing.Bitmap(FileUpload1.FileContent()); int origWidth = origBMP.Width; int origHeight = origBMP.Height; float sngRatio = origWidth / origHeight; int newWidth = 100; int newHeight = newWidth / sngRatio; System.Drawing.Bitmap newBMP = new System.Drawing.Bitmap(origBMP, newWidth, newHeight); Drawing.Graphics objGra = Drawing.Graphics.FromImage(newBMP); // // The new file should now be saved to the public portion of // the web site. // objGra.SmoothingMode = Drawing.Drawing2D.SmoothingMode.AntiAlias; objGra.InterpolationMode = Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; objGra.DrawImage(origBMP, 0, 0, newWidth, newHeight); newBMP.Save(trgDir + "tn_" + fName); // // Now, that we are done with the bitmap objects, we deallocate // them. // origBMP = null; newBMP = null; objGra = null; }Hope this helps you...
.NET
Member
10 Points
57 Posts
Re: Resizing/Optimising and image
Feb 08, 2008 07:38 AM|LINK
Hi,
Thanks for the reply!
But I couldn't get your code to work.
I've pasted all my codefile below, but just to let you know I hit the following problems....
</div>
</div>
CS0246: The type or namespace name 'Drawing' could not be found (are you missing a using directive or an assembly reference?)
...but I'm already importing the classes (Drawing, Drawing.Drawing2D, Drawing.Imaging).</div>
by Bill Hicks
Herluf
Member
218 Points
64 Posts
Re: Resizing/Optimising and image
Feb 08, 2008 10:43 AM|LINK
OK, my bad ... I should probably have tested the code before posting it. The thing is, it was written in VB and taken from a project I did a long time ago... I ran it through the VB.NET to C# translator and thought that might be OK... I must have been too quick when I took out the portions that I thought relevant.
Anyway ... the idea was to create a new bmp in memory right from the FileUpload control and then only save the resized image, like you wanted. So, I figured, that since you already had your own code (for the resizing itself), mine wouldn't be too important.
Incidentally, just in case you are not aware of it, this tool can be a help when you have VB.NET code that you want to see as C#:
http://labs.developerfusion.co.uk/convert/vb-to-csharp.aspx
.NET
Member
10 Points
57 Posts
Re: Resizing/Optimising and image
Feb 13, 2008 02:59 PM|LINK
Hi Herluf,
Apologies for the slow reply, I've been manically busy at work.
After realising that you had used a code converter to create your example code, I went through it ruthlessly and removed everything that didn't make sense with regards to C# code and managed to get the code to work!
The working code is below....
ASPX file
using System; using System.Collections; using System.Configuration; using System.Data; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.IO; // this is for the file upload using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; public partial class GDI_UploadImage : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // } protected void UploadFile(Object s, EventArgs e) { if (fileUpload.HasFile) { // Find the fileUpload control string filename = fileUpload.FileName; // Specify a upload directory string directory = Server.MapPath(@"Uploaded-Files\"); // Create a bitmap in memory of the content of the fileUpload control Bitmap originalBMP = new Bitmap(fileUpload.FileContent); // Calculate the new image dimensions int origWidth = originalBMP.Width; int origHeight = originalBMP.Height; int sngRatio = origWidth / origHeight; int newWidth = 100; int newHeight = newWidth / sngRatio; // Create a new bitmap which will hold the previous resized bitmap Bitmap newBMP = new Bitmap(originalBMP, newWidth, newHeight); // Create a graphic based on the new bitmap Graphics oGraphics = Graphics.FromImage(newBMP); // Set the properties for the new graphic file oGraphics.SmoothingMode = SmoothingMode.AntiAlias; oGraphics.InterpolationMode = InterpolationMode.HighQualityBicubic; // Draw the new graphic based on the resized bitmap oGraphics.DrawImage(originalBMP, 0, 0, newWidth, newHeight); // Save the new graphic file to the server newBMP.Save(directory + "tn_" + filename); // Once finished with the bitmap objects, we deallocate them. originalBMP = null; newBMP = null; oGraphics = null; // Write a message to inform the user all is OK label.Text = "File <b style='color: red;'>" + filename + "</b> uploaded."; // Display the image to the user Image1.ImageUrl = @"/Learning 2.0/Uploaded-Files/tn_" + filename; } else { label.Text = "No file uploaded!"; } } }Thanks Herluf :)
Kind regards,
M.
by Bill Hicks
Herluf
Member
218 Points
64 Posts
Re: Resizing/Optimising and image
Feb 13, 2008 08:16 PM|LINK
OK, I ran your C# code through that VB.NET converter and compared it to my orignal code ... it seems to do the same thing the original code does, although a few variables have changed names and minor things like that.
Anyway, I am glad to hear that you got it working. [Yes]