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" %>
  3. <!DOCTYPE html>
  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>
  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" %>
  3. <!DOCTYPE html>
  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);
    15. bmap.SetPixel(i, j, Color.FromArgb(gray, gray, gray));
    16. }
    17. }
    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" %>
    3. <!DOCTYPE html>
    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;
    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. }
    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);
    49. bmap.SetPixel(i, j, Color.FromArgb(gray, gray, gray));
    50. }
    51. }
    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. }