Convert Color Image Into Gray Scale Image In ASP .NET

Sourabh Somani
10y
15.2k
0
3

Article

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:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GrayScaleConverter.aspx.cs" Inherits="GrayScaleConverter" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>

Step 7: Now drag and drop the following controls from the tool box:

One File Upload control
One Button control for uploading
One Button control to convert a color image to a gray scale image

After doing all this, my GrayScaleConverter.aspx page code is:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GrayScaleConverter.aspx.cs" Inherits="GrayScaleConverter" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
Upload an Image:<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" />
<br />
<asp:Button ID="btnGrayScale" runat="server" Text="Click Me To Conevert Gray Scale" />
<br /><br />
<asp:Image ID="Img" runat="server" />
</div>
</form>
</body>
</html>

Step 8: Now open the code behind of this Web Form:

Add the "System.Drawing" namespace
Use a global variable, Bitmap _current.
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. }
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. }
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:

When the project is initially run:
After uploading an image:
After clicking on the covert gray scale button:

The following is the complete code:

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>
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. }

Up Next

Ebook Download

View all

ASP.NET GridView Control Pocket Guide

Read by 2.8k people

Download Now!

Learn

View all

sourabhsomani.com