Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / ASP.NET

How to make pictures with rounded corners in ASP.NET

4.14/5 (6 votes)
14 Sep 2009CPOL 54.2K   583  
How to make pictures with rounded corners in ASP.NET.

PicturesWithRoundedCornes

Introduction

In this article, we will learn about how to make pictures with rounded corners in ASP.NET. Here are the steps involved:

  1. Add to your project a webform (for example, PictureViewer.aspx).
  2. In the code-file "PictureViewer.aspx.cs", insert this code:
  3. C#
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Drawing;
    using System.Drawing.Imaging;
    
    public partial class PictureViewer : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
            string Filename = Request.QueryString["Filename"];
            Int32 Radius = Convert.ToInt32(Request.QueryString["Radius"])  ;
            if (!String.IsNullOrEmpty(Filename) &&
                Radius > 0)
            {
                System.Drawing.Bitmap bmp = MakeRoundedCorners(Filename, Radius);
    
                Response.ContentType = "image/Png";
                bmp.Save(Response.OutputStream, ImageFormat.Png);
            }
           
        }
    
        private Bitmap MakeRoundedCorners(String Filename,Int32 Radius)
        {
            System.Drawing.Image im =
             System.Drawing.Image.FromFile(Server.MapPath(Filename));
    
            Bitmap Bmp = new Bitmap(im, im.Width, im.Height);
            Graphics G = Graphics.FromImage(Bmp);
            Brush brush = new System.Drawing.SolidBrush(Color.Red);
    
     
    
            for (int i = 0; i < 4; i++)
            {
                Point[] CornerUpLeft = new Point[3];
    
                CornerUpLeft[0].X = 0;
                CornerUpLeft[0].Y = 0;
    
                CornerUpLeft[1].X = Radius;
                CornerUpLeft[1].Y = 0;
    
                CornerUpLeft[2].X = 0;
                CornerUpLeft[2].Y = Radius;
    
                System.Drawing.Drawing2D.GraphicsPath pathCornerUpLeft =
                   new System.Drawing.Drawing2D.GraphicsPath();
    
                pathCornerUpLeft.AddArc(CornerUpLeft[0].X, CornerUpLeft[0].Y,
                    Radius, Radius, 180, 90);
                pathCornerUpLeft.AddLine(CornerUpLeft[0].X, CornerUpLeft[0].Y,
                    CornerUpLeft[1].X, CornerUpLeft[1].Y);
                pathCornerUpLeft.AddLine(CornerUpLeft[0].X, CornerUpLeft[0].Y,
                    CornerUpLeft[2].X, CornerUpLeft[2].Y);
    
                G.FillPath(brush, pathCornerUpLeft);
                pathCornerUpLeft.Dispose();
    
                Bmp.RotateFlip(RotateFlipType.Rotate90FlipNone);
            }
    
            brush.Dispose();
            G.Dispose();
    
            Color backColor = Bmp.GetPixel(0, 0);
    
            Bmp.MakeTransparent(backColor);
    
            return Bmp;
           
        }
    }
  4. In Default.aspx, insert:
  5. ASP.NET
    <body style="background-color:Black">
      <form id="form1" runat="server"  >
        <asp:Image runat="server" ID="MyPicture" 
            ImageUrl="~/PictureViewer.aspx?Filename=Wolf.jpg&Radius=50"/>
        <asp:Image runat="server" ID="Image1" 
            ImageUrl="~/PictureViewer.aspx?Filename=me.jpg&Radius=120"/>
      </form>
    </body>
  6. Don’t forget to add your own pictures in the project instead of mine: Wolf.jpg and me.jpg.

Good luck!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)