ASP.NET

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

Up Next
    Ebook Download
    View all
    Learn
    View all
    sourabhsomani.com
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs