• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 206
  • Last Modified:

Resizing an image using Graphics.DrawImage class (or whatever works)

I want to resize a image and display in on my page using a <asp:Image> control.

i have been doing some searching around and there are a bunch of examples out there that show how to do this, but i would like to use the .Net class do this.

What i am trying to do is take a image that is 300x459 in size a proportionatly scale it and then display it on my page using a <asp:Image> control.

First off, can this be done?
If it can i need some info on how to resize the image and then how to display it on the aspx page. I would also like to avoid having to save this thumbnail on the filesystem andrather generate the smaller image in memmory...

Nugs
0
Nugs
Asked:
Nugs
  • 7
  • 6
1 Solution
 
McExpCommented:
Below are my functions which sits in a Handler which renders a thumbnail of an image to the current response

        public static void CreateJpegThumb(string relativeFileName)
        {
            string[] pathnodes = HttpContext.Current.Request.Path.Split('/');
            string rightnode = pathnodes[pathnodes.Length - 1];

            string file = HttpContext.Current.Server.MapPath(relativeFileName);

            Image oImg = null;

            try
            {
                oImg = Image.FromFile(file);
                if (oImg.Height > oImg.Width)
                {
                    oImg.RotateFlip(RotateFlipType.Rotate270FlipNone);
                }
            }
            catch
            {
                oImg = Image.FromFile(HttpContext.Current.Server.MapPath("~/images/ErrorImage.jpg"));
            }

            Image Resized = ResizeJpeg(oImg, 150, 120);

            MemoryStream imageStream = new MemoryStream();
            Resized.Save(imageStream, ImageFormat.Jpeg);
            byte[] imageContent = new Byte[imageStream.Length];
            imageStream.Position = 0;
            imageStream.Read(imageContent, 0, (int)imageStream.Length);

            HttpContext.Current.Response.ContentType = "image/jpeg";
            HttpContext.Current.Response.BinaryWrite(imageContent);
            Resized.Dispose();
            oImg.Dispose();
        }

        public static Image ResizeJpeg(Image Original, double MaxWidth, double MaxHeight)
        {
            double width;
            double height;
            if (Original.Height > Original.Width)
            {
                height = Math.Min(MaxHeight, Original.Height);
                double tempMultiplier = height / Original.Height;
                if (tempMultiplier > 1.0)
                {
                    tempMultiplier = 1.0;
                }
                width = Original.Width * tempMultiplier;
            }
            else
            {
                width = Math.Min(MaxWidth, Original.Width);
                double tempMultiplier = width / Original.Width;
                if (tempMultiplier > 1.0)
                {
                    tempMultiplier = 1.0;
                }
                height = Original.Height * tempMultiplier;
            }
            Image Resized = new Bitmap(Convert.ToInt32(width), Convert.ToInt32(height), Original.PixelFormat);

            Graphics oGraphic = Graphics.FromImage(Resized);
            Rectangle oRectangle = new Rectangle(0, 0, Convert.ToInt32(width), Convert.ToInt32(height));
            oGraphic.DrawImage(Original, oRectangle);

            return Resized;
        }
0
 
NugsAuthor Commented:
This may be a dumb question but how does this display the resized image on the aspx page?

Nugs
0
 
McExpCommented:
The function is called from a HTTP Handler and as such no output is written to the browser until the following lines are run: -

            //Create a memory stream of the image
            MemoryStream imageStream = new MemoryStream();
            Resized.Save(imageStream, ImageFormat.Jpeg);
            byte[] imageContent = new Byte[imageStream.Length];
            imageStream.Position = 0;
            imageStream.Read(imageContent, 0, (int)imageStream.Length);

            //write the memory stream to the current response
            HttpContext.Current.Response.ContentType = "image/jpeg";
            HttpContext.Current.Response.BinaryWrite(imageContent);
            Resized.Dispose();
            oImg.Dispose();
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
NugsAuthor Commented:
I'm still a little unclear on how i would position this image within my page or bind it to a <asp:Image control... But let me play with it some, i obviousley have some learning to do in this department...

Nugs
0
 
McExpCommented:
are you familiar with HTTP Handlers?

If so all you need to do is create a Handler and pass to the functions above a parameter which is the relative location of the image

Then to place the image at a location on your page set the httpHandler as the source of an html image control, e.g.

<img src="thumbnail.ashx?ImageName=~/images/testImage.jpg" alt="" />
0
 
NugsAuthor Commented:
This would be my first and certainly not my last, very usefull.

Couple of questions for you:

1) May i ask why you rotate the image?
oImg.RotateFlip(RotateFlipType.Rotate270FlipNone);
I removed this, just wondering why you were doing that...

2) I have to look closer at the ResizeJpeg method, but is there a way to set the max width of the image and have the height be constrained to it?

Thanks,
Nugs
0
 
NugsAuthor Commented:
Also, if i use this in say a repeater that will display 10 thumbnail images, would this become a resource intensive process? I expect that it will but how far can i go with using HTTP Handlers without becoming lagged...

Nugs
0
 
McExpCommented:
The reason that I use the RotateFlip is to give the same effect you would see on a strip of film negatives, if you take the portrait and landscape pictures all hade the same shape but one is rotated

The Resize Jpeg takes exactly the parameters I think you are looking for, given a Max Witdh and Max Height it enusres that the resulting thumbnail is smaller than that.

A Http Handler is the most efficent way to server up dynamic functionality to a web browser as it doesn't have the overhead of the Page Object model
0
 
NugsAuthor Commented:
Regarding ResizeJpeg method. Would it be possible to only specify a max width and have the resulting image always be that width and only the height ajusts accordingly?

Nugs
0
 
McExpCommented:
Yea, jusat set a very big height value this means that it will always fall back to the width property.

Image Resized = ResizeJpeg(oImg, 150, 9999);



0
 
NugsAuthor Commented:
Awesome, last question and then i will leave you be :)

What about image caching. Is it possible to cache the generated images?
0
 
McExpCommented:
um, They will get cached local on the users browsers or on ISP's cache's

but if you want to cache the images I think you might have to look into doing this yourself.

The article below is a good overview of the built in .net caching functionality

http://aspnet.4guysfromrolla.com/articles/022802-1.aspx
0
 
NugsAuthor Commented:
Thank you so much, this is great stuff...

Oh and fyi... Setting the MaxHeight to 9999 will cause the image to display the original size because of this piece of code:

        if (Original.Height > Original.Width) //<-- Most of the time Height is greater that width
        {
            height = Math.Min(MaxHeight, Original.Height); //<-- Original Height will always be the lesser of the Max height
            double tempMultiplier = height / Original.Height;
            if (tempMultiplier > 1.0)
            {
                tempMultiplier = 1.0;
            }
            width = Original.Width * tempMultiplier;
        }

I think this was because originally you were flipping the images... Anyways, i'm all sorted now, Thank you again!

Nugs
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now