Dynamically change an images height using codebehind

Question

I want to re-size an asp:image using code behind. I'm gonna re-size the image depending on its height so it can fit into place. So far i have

        Image img1 = ((Image)e.Item.FindControl("prodImage"));
        int finalWidth = Convert.ToInt32(img1.Width);
        int maxWidth = 20;

        if (finalWidth > maxWidth)
        {
            resize
        }
        else
        {
            dont resize
        }

I am getting a conversion error because img1.width is a web unit. I tried but couldnt cast as an int or cast the int as a unit.

Thanks to anyone who can help

You have to take the Value of the Unit like this `int finalWidth = (int)img1.Width.Value;` — Shadow The GPT Wizard, Aug 25 '11 at 12:54
Bear in mind, with the code above you're only changing how the browser will scale the image, not changing the actual image — Simon Halsey, Aug 25 '11 at 13:27

score 1 · Answer 1 · answered Aug 25 '11 at 12:44

1

You can use use this code

double ratio = maxWidth / finalWidth;
int maxHeight = (int) img1.Height * ratio;
System.Drawing.Image resized= img1.GetThumbnailImage(maxWidth , maxHeight , null, IntPtr.Zero);

take a look at this function

answered Aug 25 '11 at 12:44

Mehran

1,977
1
18
33

Note: This is great if you only want a small thumbnail, but the image quality will be extremely poor if you're creating anything larger. The advantage is that it is high performance. – Doctor Jones Aug 25 '11 at 12:46
well 20 pixels looks quite small to me. – Mehran Aug 25 '11 at 12:48
Agreed, I'm just making a note for anyone who happens across this thread. – Doctor Jones Aug 25 '11 at 13:13

score 1 · Accepted Answer · edited May 23 '17 at 12:26

See this answer from "High Quality Image Scaling C#".

Here's the relevant bit of code that you'll need:

    /// <summary>
    /// Resize the image to the specified width and height.
    /// </summary>
    /// <param name="image">The image to resize.</param>
    /// <param name="width">The width to resize to.</param>
    /// <param name="height">The height to resize to.</param>
    /// <returns>The resized image.</returns>
    public static System.Drawing.Bitmap ResizeImage(System.Drawing.Image image, int width, int height)
    {
        //a holder for the result
        Bitmap result = new Bitmap(width, height);

        //use a graphics object to draw the resized image into the bitmap
        using (Graphics graphics = Graphics.FromImage(result))
        {
            //set the resize quality modes to high quality
            graphics.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
            graphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
            graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
            //draw the image into the target bitmap
            graphics.DrawImage(image, 0, 0, result.Width, result.Height);
        }

        //return the resulting bitmap
        return result;
    }

This looks like it would work. Ill test it later and get back to ya. Thanks — Wesley Skeen, Aug 25 '11 at 15:28

score 0 · Answer 3 · answered Aug 26 '11 at 10:05

I found out how to do it without using the graphics library

        //Create a new image and set it to the image that was loaded in initially.
        System.Web.UI.WebControls.Image image = loaded image;
        //Check if the image has a picture and if not put in the no_picture image.
        if (product.Image1.ToString() == "")
        {
            ((System.Web.UI.WebControls.Image)e.Item.FindControl("prodImage")).ImageUrl                = "no_picture.gif";
        }
        else
        {
            ((System.Web.UI.WebControls.Image)e.Item.FindControl("prodImage")).ImageUrl = "upload" + product.Image1.ToString();                
        }   
        //Call a function to keep the images within the borders of each repeater cell. Returns an Image object so we can access the new height/width.
        System.Web.UI.WebControls.Image dummyImg = keepAspectRatio(image, 110, 100);

        image.Width = new Unit(dummyImg.Width.Value);
        image.Height = new Unit(dummyImg.Height.Value); 

        public System.Web.UI.WebControls.Image keepAspectRatio(System.Web.UI.WebControls.Image image, double maxWidth, double maxHeight)
        {
           //Create an Image object to store width and height
           System.Web.UI.WebControls.Image dummyImage2 = new System.Web.UI.WebControls.Image();           
           //Ratio variables to calculate aspect
           double MaxRatio = maxWidth /  maxHeight;
           double ImgRatio = image.Width.Value /  image.Height.Value;
           //Compare the images width that was passed in to the max width allowed
           if (image.Width.Value > maxWidth)
           {
              //Set the dummy images height and width
              dummyImage2.Height = (int) Math.Round(maxWidth / ImgRatio, 0);
              dummyImage2.Width = (int)maxWidth;            
           }
           //Compare the images height that was passed in to the max height allowed
           if (image.Height.Value > maxHeight)
           {
              //Set the dummy images height and width
              dummyImage2.Height = (int)Math.Round(maxWidth * ImgRatio, 0);
              dummyImage2.Width = (int)maxHeight;            
            }
           //Returnthe dummy object so its parameters can be accessed
           return dummyImage2;
        }

score 0 · Answer 4 · answered Jan 24 '12 at 21:44

You can use this function to keep the ratio:

                System.Drawing.Size size = LockAspectRatio(sFullFilePathAndName, Convert.ToInt32(rdPhoto.Width.Value) - 20, Convert.ToInt32(rdPhoto.Height.Value) - 80);
                imgRep.Width = new Unit(size.Width);
                imgRep.Height = new Unit(size.Height); 


public System.Drawing.Size LockAspectRatio(string sFilePath, double maxWidth, double maxHeight)
    {
        int newWidth, newHeight;
        System.Drawing.Size size = new System.Drawing.Size();
        System.Drawing.Image image = System.Drawing.Image.FromFile(sFilePath);

        size.Width = image.Width;
        size.Height = image.Height;

        newWidth = image.Width;
        newHeight = image.Height;

        double imgRatio = (double)image.Width / (double)image.Height;

        //Step 1: If image is bigger than container, shrink it
        if (image.Width > maxWidth)
        {
            size.Height = (int)Math.Round(maxWidth * imgRatio, 0);
            size.Width = (int)maxWidth;

            newWidth = size.Width;
            newHeight = size.Height;
        }

        if (newHeight > maxHeight)
        {
            size.Height = (int)maxHeight;
            size.Width = (int)Math.Round(maxHeight * imgRatio, 0);  
        }

        //Step 2: If image is smaller than container, stretch it (optional)
        if ((image.Width < maxWidth) && (image.Height < maxHeight))
        {
            if (image.Width < maxWidth)
            {
                size.Height = (int)Math.Round(maxWidth * imgRatio, 0);
                size.Width = (int)maxWidth;

                newWidth = size.Width;
                newHeight = size.Height;
            }

            if (newHeight > maxHeight)
            {
                size.Height = (int)maxHeight;
                size.Width = (int)Math.Round(maxHeight * imgRatio, 0);
            }
        }
        return size;
    }

Dynamically change an images height using codebehind

4 Answers4

Linked