Invert Color Of An Image Using ASP .NET

Sourabh Somani
10y
13.6k
0
4

Article

Introduction

Inverting an image's color is a filtering mechanism by replacing a color with the opposite color. For example if the color in the component is 00 then the opposite we get is FF (255-0). like:

The invert color for RGB is CMY.

Color	Inverted Color
Red	Cyan
Green	Magenta
Blue	Yellow

Let's step-by-step make a simple application for inverting image color that is as the following:

Step 1: First open Visual Studio.

Step 2: In the menu bar click on the "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 a name (Like: "Invert") 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 in front of you, select "Web Form" and provide the name of the Web Form (Like: InvertImageColor.aspx) and click on the "Add" button.

Note: steps 1 to 5 are similar to my previous article: Control Image Brightness Using ASP.NET

Step 6: Now a Web Form will be in front of you and that code will be as the following:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="InvertImageColor.aspx.cs" Inherits="InvertImageColor" %>
<!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 toolbox:

One File Upload control.
One Button control For upload.
One Button control to invert image color.
One Image Control.

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

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="InvertImageColor.aspx.cs" Inherits="InvertImageColor" %>
<!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="btnInvert" runat="server" Text="Invert Image Color" />
<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 in the "page_load" event:
1. protected void btnUpload_Click(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("<script>alert('Please Select The File')</script>");
13. }
14. }
Write the following code in the "Invert Image Color" Button's click event:
1. protected void btnInvert_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. bmap.SetPixel(i, j,
14. Color.FromArgb(255 - col.R, 255 - col.G, 255 - col.B));
15. }
16. }
17. _current = (Bitmap)bmap.Clone();
18. Random rnd = new Random();
19. int a = rnd.Next();
20. _current.Save(Server.MapPath("Images/" + a + ".png"));
21. Img.ImageUrl = "Images/" + a + ".png";
22. }
23. }

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 "Invert Image Color" button:

Complete Code

Code for InvertImageColor.aspx:
1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="InvertImageColor.aspx.cs" Inherits="InvertImageColor" %>
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="btnInvert" runat="server" Text="Invert Image Color" OnClick="btnInvert_Click" />
16. <br />
17. <br />
18. <asp:Image ID="Img" runat="server" />
19. </div>
20. </form>
21. </body>
22. </html>
Code for InvertImageColor.aspx.cs(Code Behind):
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 InvertImageColor : 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. }
36. protected void btnInvert_Click(object sender, EventArgs e)
37. {
38. if (Session["filepath"] != null)
39. {
40. Bitmap temp = (Bitmap)_current;
41. Bitmap bmap = (Bitmap)temp.Clone();
42. Color col;
43. for (int i = 0; i < bmap.Width; i++)
44. {
45. for (int j = 0; j < bmap.Height; j++)
46. {
47. col = bmap.GetPixel(i, j);
48. bmap.SetPixel(i, j,
49. Color.FromArgb(255 - col.R, 255 - col.G, 255 - col.B));
50. }
51. }
52. _current = (Bitmap)bmap.Clone();
53. Random rnd = new Random();
54. int a = rnd.Next();
55. _current.Save(Server.MapPath("Images/" + a + ".png"));
56. Img.ImageUrl = "Images/" + a + ".png";
57. }
58. }
59. }

Up Next

Ebook Download

View all

Hands on with ASP.Net MVC - Covering MVC 6

Read by 23.2k people

Download Now!

Learn

View all

sourabhsomani.com