Post
Ask Question

Convert Color Image Into Gray Scale Image In ASP .NET

Introduction: A gray scale image is an image in which the value of each pixel is a single sample, that is, it carries only intensity information. The gray scale image is also known as a black-and-white Image that is composed exclusively of shades of gray, varying from black at the weakest intensity to white at the strongest.
Use the following procedure to create a simple application for converting a color image to a gray scale image. ( Note: steps 1 to 5 are similar to my previous article: Control Image Brightness Using ASP.NET.)
Step 1: First open Visual Studio.
Step 2: In the menu bar click on "File" > "New Web Site" or press "Shift + Alt + N".
Step 3: Now a dialog box will be shown; select "ASP.NET Empty Web Site" and provide the website name (like: "GrayScaleConverter") and press "OK".
Step 4: Now open Solution Explorer and right-click on the project and click on "Add" > "Add New Item" or simply press "Ctrl + Shift + A".
Step 5:  A dialog will be opened. Select "Web Form" and provide the name of the Web Form (like: "GrayScaleConverter.aspx") and click on the "Add" button.
Step 6: Now a Web Form will be front of you and that code will be as in the following:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GrayScaleConverter.aspx.cs" Inherits="GrayScaleConverter" %>  
  2.       
  3. <!DOCTYPE html>      
  4.       
  5. <html xmlns="http://www.w3.org/1999/xhtml">      
  6. <head runat="server">       
  7.     <title></title>      
  8. </head>      
  9. <body>      
  10.     <form id="form1" runat="server">      
  11.         <div>      
  12.       
  13.         </div>      
  14.     </form>      
  15. </body>      
  16. </html>      
Step 7: Now drag and drop the following controls from the tool box: 
  1. One File Upload control
  2. One Button control for uploading
  3. One Button control to convert a color image to a gray scale image  
After doing all this, my GrayScaleConverter.aspx page code is:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GrayScaleConverter.aspx.cs" Inherits="GrayScaleConverter" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.         <div>  
  12.             Upload an Image:<asp:FileUpload ID="FileUpload1" runat="server" />  
  13.              <asp:Button ID="btnUpload" runat="server" Text="Upload" />  
  14.             <br />  
  15.              <asp:Button ID="btnGrayScale" runat="server" Text="Click Me To Conevert Gray Scale" />  
  16.             <br /><br />  
  17.             <asp:Image ID="Img" runat="server" />  
  18.         </div>  
  19.     </form>  
  20. </body>  
  21. </html>  
Step 8: Now open the code behind of this Web Form:
  1. Add the "System.Drawing" namespace
  2. Use a global variable, Bitmap _current.
  3. Write the following code for the "page_load" event:
    1. protected void Page_Load(object sender, EventArgs e)  
    2.     {  
    3.         if (Session["filepath"] != null)  
    4.         {  
    5.             Img.ImageUrl = Session["filepath"].ToString();  
    6.             _current = (Bitmap)Bitmap.FromFile(Server.MapPath(Session["filepath"].ToString()));  
    7.         }  
    8.     }  
  4. Write the following code in the "Upload" Button's click event:
    1. protected void btnUpload_Click(object sender, EventArgs e)  
    2.     {  
    3.         if (FileUpload1.HasFile)  
    4.         {  
    5.             string filePath = Server.MapPath("Images/" + FileUpload1.FileName);  
    6.             FileUpload1.SaveAs(filePath);  
    7.             Img.ImageUrl = "Images/" + FileUpload1.FileName;  
    8.             Session["filepath"] = "Images/" + FileUpload1.FileName;  
    9.         }  
    10.         else  
    11.         {  
    12.             Response.Write("Please Select The File");  
    13.         }  
    14.     }  
  5. Write the following code in the "Gray Scale Converter" Button's click event:
    1. protected void btnGrayScale_Click(object sender, EventArgs e)  
    2.     {  
    3.         if (Session["filepath"] != null)  
    4.         {  
    5.             Bitmap temp = (Bitmap)_current;  
    6.             Bitmap bmap = (Bitmap)temp.Clone();  
    7.             Color col;  
    8.             for (int i = 0; i < bmap.Width; i++)  
    9.             {  
    10.                 for (int j = 0; j < bmap.Height; j++)  
    11.                 {  
    12.                     col = bmap.GetPixel(i, j);  
    13.                     byte gray = (byte)(.299 * col.R + .587 * col.G + .114 * col.B);  
    14.   
    15.                     bmap.SetPixel(i, j, Color.FromArgb(gray, gray, gray));  
    16.                 }  
    17.             }  
    18.   
    19.             _current = (Bitmap)bmap.Clone();  
    20.             Random rnd = new Random();  
    21.             int a = rnd.Next();  
    22.             _current.Save(Server.MapPath("Images/" + a + ".png"));  
    23.             Img.ImageUrl = "Images/" + a + ".png";  
    24.         }  
    25.     }  
Step 9: Run the project and you will get the following output:  
  1. When the project is initially run:

  2. After uploading an image:


  3. After clicking on the covert gray scale button:

The following is the complete code:
  1. Code for GrayScaleConverter.aspx:
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GrayScaleConverter.aspx.cs" Inherits="GrayScaleConverter" %>  
    2.   
    3. <!DOCTYPE html>  
    4.   
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head runat="server">  
    7.     <title></title>  
    8. </head>  
    9. <body>  
    10.     <form id="form1" runat="server">  
    11.         <div>  
    12.             Upload an Image:<asp:FileUpload ID="FileUpload1" runat="server" />  
    13.              <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />  
    14.             <br />  
    15.              <asp:Button ID="btnGrayScale" runat="server" Text="Click Me To Conevert Gray Scale" OnClick="btnGrayScale_Click"/>  
    16.             <br /><br />  
    17.             <asp:Image ID="Img" runat="server" />  
    18.         </div>  
    19.     </form>  
    20. </body>  
    21. </html>  

  2. Code for GrayScaleConverter.aspx.cs:
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Drawing;  
    4. using System.Linq;  
    5. using System.Web;  
    6. using System.Web.UI;  
    7. using System.Web.UI.WebControls;  
    8.   
    9. public partial class GrayScaleConverter : System.Web.UI.Page  
    10. {  
    11.     Bitmap _current;  
    12.     protected void Page_Load(object sender, EventArgs e)  
    13.     {  
    14.         if (Session["filepath"] != null)  
    15.         {  
    16.             Img.ImageUrl = Session["filepath"].ToString();  
    17.             _current = (Bitmap)Bitmap.FromFile(Server.MapPath(Session["filepath"].ToString()));  
    18.         }  
    19.     }  
    20.     protected void btnUpload_Click(object sender, EventArgs e)  
    21.     {  
    22.         if (FileUpload1.HasFile)  
    23.         {  
    24.             string filePath = Server.MapPath("Images/" + FileUpload1.FileName);  
    25.             FileUpload1.SaveAs(filePath);  
    26.             Img.ImageUrl = "Images/" + FileUpload1.FileName;  
    27.             Session["filepath"] = "Images/" + FileUpload1.FileName;  
    28.         }  
    29.         else  
    30.         {  
    31.             Response.Write("Please Select The File");  
    32.         }  
    33.     }  
    34.   
    35.     protected void btnGrayScale_Click(object sender, EventArgs e)  
    36.     {  
    37.         if (Session["filepath"] != null)  
    38.         {  
    39.             Bitmap temp = (Bitmap)_current;  
    40.             Bitmap bmap = (Bitmap)temp.Clone();  
    41.             Color col;  
    42.             for (int i = 0; i < bmap.Width; i++)  
    43.             {  
    44.                 for (int j = 0; j < bmap.Height; j++)  
    45.                 {  
    46.                     col = bmap.GetPixel(i, j);  
    47.                     byte gray = (byte)(.299 * col.R + .587 * col.G + .114 * col.B);  
    48.   
    49.                     bmap.SetPixel(i, j, Color.FromArgb(gray, gray, gray));  
    50.                 }  
    51.             }  
    52.   
    53.             _current = (Bitmap)bmap.Clone();  
    54.             Random rnd = new Random();  
    55.             int a = rnd.Next();  
    56.             _current.Save(Server.MapPath("Images/" + a + ".png"));  
    57.             Img.ImageUrl = "Images/" + a + ".png";  
    58.         }  
    59.     }  
    60. }  

 


Similar Articles