Post
Ask Question

Invert Color Of An Image Using ASP .NET

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:  
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="InvertImageColor.aspx.cs" Inherits="InvertImageColor" %>  
  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.         </div>  
  13.     </form>  
  14. </body>  
  15. </html>  
Step 7: Now drag and drop the following controls from the toolbox:
  1. One File Upload control.
  2. One Button control For upload.
  3. One Button control to invert image color.
  4. One Image Control.
After doing all this, my InvertImageColoe.aspx page code is:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="InvertImageColor.aspx.cs" Inherits="InvertImageColor" %>  
  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="btnInvert" runat="server" Text="Invert Image Color" />  
  16.             <br />  
  17.             <br />  
  18.             <asp:Image ID="Img" runat="server" />  
  19.         </div>  
  20.     </form>  
  21. </body>  
  22. </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 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.     }  
  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("<script>alert('Please Select The File')</script>");  
    13.         }    
    14.     }   
  5. 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:
  1. When the project is initially run:


  2. After uploading an image:


  3. After clicking on the "Invert Image Color" button:


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

  2. 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;  
    8.   
    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.     }  
    34.   
    35.   
    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. } 


Similar Articles