How to enlarge image to normal size in ASP.NET 2.0

Question

• My users uploads a picture and the picture get saved into my SQl Server Database
• My users view the picture on the page in a normal Image WebControl with size 150px by 150px - example can be found http://www.erate.co.za/CompanyProfile.aspx?ID=112 - the USA flag is the Image i am talking about.

If the user uploads a picture of 300px by 200px the image will look funny in my static 150px by 150px Image box. Any idea how i can display the Image so it wont be fuzzy?

Also, how can a have some form of pop-up that will appear on the screen, showing the actual size of the picture from the database when the user clicks on the 150px by 150px Image.

Note: I dont want the Image static size to increase as this will totally mess up my page layout and look. It must be some form of pop-up or something. Something i have seen before i think was really cool. User clicked on the small image and then a pop-up appeared in the middle of the screen with the actual size of the picure and everything ells on the page was disabled until the user clicked on the close button. Can this be done in ASP.NET 2.0? Or something like it?

Regards Etienne

Answer 1

Use thumbnails of a fixed width/height.

You resize the actual images (as stored in the database) on the fly.

So your thumnail size is always 150px by 150px. The actual images (width/height) as stored in the database would vary.

You start out by showing the list of resized thumbnails which display the full image in the popup window when you click on the thumbnail item.

Code to 'thumbnail' an image:

        byte[] getResizedImage(String path, int width, int height)
        {
            try
            {
                Bitmap imgIn = new Bitmap(path);

                //Scale
                double y = imgIn.Height;
                double x = imgIn.Width;
                double factor = 1;
                if (width > 0)
                {
                    factor = width / x;
                }
                else if (height > 0)
                {
                    factor = height / y;
                }

                System.IO.MemoryStream outStream = new System.IO.MemoryStream();
                Bitmap imgOut = new Bitmap((int)(x * factor), (int)(y * factor));
                Graphics g = Graphics.FromImage(imgOut);
                g.Clear(Color.White);
                g.DrawImage(imgIn, new Rectangle(0, 0, (int)(factor * x), (int)(factor * y)), new Rectangle(0, 0, (int)x, (int)y), GraphicsUnit.Pixel);
                imgOut.Save(outStream, ImageFormat.Jpeg);

                return outStream.ToArray();

            }
            catch (Exception)
            {
...
            }

        }

This example uses a .jpg image on the web server file system but can be adjusted to cater for any images/types stored in the db.

Mooi bly.

Edit: Fixed ImageFormat

Answer 2

Check out this example of a modal popup;

http://www.asp.net/ajax/ajaxcontroltoolkit/samples/modalpopup/modalpopup.aspx