Asp.Net - Fitting Image To Box

by Bar Zohan 26. January 2010 19:53

Problem

In a page you need to list items and their photos but those photos are all in different sizes. So you have a standart photo area and you have to fit those images into it. And not only fit them, but also you have to preserve their width to height ratio. So here is how we deal with this problem;

  • First we create another asp.net page like fitthisimagetobox.aspx
  • Then we take some parameters from querystring. (imagename, boxwidth, boxheight)
  • We use the image in another page like; <img src="fitthisimagetobox.aspx?imagename=exampleimage.gif&boxwidth=150&boxheight=200"/>

Here is the code for our fitthisimagetobox.aspx page;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.QueryString["no"] == null)
            {
                return;
            }
            int ResimNo = Convert.ToInt32(Request.QueryString["no"]);

            using (DataModel datamodel = new DataModel())
            {
                osUrun urun = (from d in datamodel.osUrun where d.Id == ResimNo select d).FirstOrDefault();

                if (urun == null)
                {
                    return;
                }

                MemoryStream stream = new MemoryStream();

                string originalFilePath = Server.MapPath("~/Resimler/") + urun.Resim;

                string thumbnailFilePath = string.Empty;

                using (Bitmap bmp = new Bitmap(originalFilePath))
                {
                    int width = 0, height = 0, gerekenwidth = 0, gerekenheight = 0, widthSon = 0, heightSon = 0;

                    width = bmp.Width;
                    height = bmp.Height;
                    if (Request.QueryString["height"] == null)
                    {
                        gerekenheight = 200;
                    }
                    else
                    {
                        gerekenheight = Convert.ToInt32(Request.QueryString["height"]);
                    }

                    if (Request.QueryString["width"] == null)
                    {
                        gerekenwidth = 160;
                    }
                    else
                    {
                        gerekenwidth = Convert.ToInt32(Request.QueryString["width"]);
                    }
                 

                    if (width > height)
                    {
                        widthSon = gerekenwidth;
                        heightSon = (widthSon * height) / width;
                    }
                    else
                    {
                        heightSon = gerekenheight;
                        widthSon = (heightSon * width) / height;
                    }

                    if (width < gerekenwidth || height < gerekenheight)
                    {
                        width = gerekenwidth;
                        height = gerekenheight;
                    }

                    Size newSize = new Size(widthSon, heightSon);
                    using (Bitmap thumb = new Bitmap((System.Drawing.Image)bmp, newSize))
                    {

                        using (Graphics g = Graphics.FromImage(thumb))
                        {

                            g.DrawImage(bmp, new Rectangle(0, 0, thumb.Width, thumb.Height));



                            thumb.Save(stream,System.Drawing.Imaging.ImageFormat.Jpeg);

                        }

                    }

                }

                Response.ContentType = "image/gif";

                stream.WriteTo(Response.OutputStream);

            }
        }

Notes: Here -> Server.MapPath("~/pictures/") change "~/pictures/" with your pictures directory path.

          If boxheight and boxwidth querystring parameters are null they are defaulted to 200 and 160. If you'd like these values to differ you should change them in code.

 

kick it on DotNetKicks.com

Tags: , ,

.Net Framework | C# | Web | Asp.Net | MVC

Powered by BlogEngine.NET 1.5.0.7
Theme by Mads Kristensen