Home > ASP.Net > Change Color of Uploaded Image to Black and White

Change Color of Uploaded Image to Black and White


try this example to Change Color of Uploaded Image to Black and White

1- Create new website and add new page and New Folder and Name it Upload and inside this folder add another folder

and name it to Original

2- Open your Web page and add FileUpload and Button and Image control

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ChangeImageColor.aspx.cs" Inherits="ChangeImageColor" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" >
<head runat="server">
    <title>Change Color Image to Black and White</title>
    <form id="form1" runat="server">
    <p>Please upload your picture:
    <asp:FileUpload id="PictureUploadControl" Width="400" runat="server" />       
    <asp:Button runat="server" id="AddPictureButton" text="Upload" onclick="AddPictureButton_Click" /><br />

    <asp:Image ID="GrayscaledPhoto" runat="server" /><br />


3- In code behind add this code:-

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;  //Bitmap needed this
using System.Drawing.Imaging; //ImageFormat needed this
using System.IO; // .delete needed this
public partial class ChangeImageColor : System.Web.UI.Page
    public static Bitmap Grayscale(Bitmap bitmap)
        //Declare myBitmap as a new Bitmap with the same Width & Height
        Bitmap myBitmap = new Bitmap(bitmap.Width, bitmap.Height);
        for (int i = 0; i < bitmap.Width; i++)
            for (int x = 0; x < bitmap.Height; x++)
                //Get the Pixel
                Color BitmapColor = bitmap.GetPixel(i, x);
                //I want to come back here at some point and understand, then change, the constants
                //Declare grayScale as the Grayscale Pixel
                int grayScale = (int)((BitmapColor.R * 0.3) + (BitmapColor.G * 0.59) + (BitmapColor.B * 0.11));
                //Declare myColor as a Grayscale Color
                Color myColor = Color.FromArgb(grayScale, grayScale, grayScale);
                //Set the Grayscale Pixel
                myBitmap.SetPixel(i, x, myColor);
        return myBitmap;

    protected void AddPictureButton_Click(object sender, EventArgs e)
        if (PictureUploadControl.HasFile)
            PictureUploadControl.SaveAs(Server.MapPath("~/Upload/Original") + PictureUploadControl.FileName);
            Bitmap oldBitmap = new Bitmap(Server.MapPath("~/Upload/Original") + PictureUploadControl.FileName, false);
            Bitmap newBitmap = Grayscale(new Bitmap(oldBitmap));
            string name = Guid.NewGuid().ToString();
            newBitmap.Save(Server.MapPath("~/Upload/") + name + ".jpg", ImageFormat.Jpeg);
            //we will delete the old
           // File.Delete(Server.MapPath("~/Upload/Original") + PictureUploadControl.FileName);
            GrayscaledPhoto.ImageUrl = "Upload/" + name + ".jpg";

    protected void Page_Load(object sender, EventArgs e)


Hope this helps

Good Luck

Categories: ASP.Net
  1. Boss BigName
    September 5, 2012 at 8:11 am

    thank you

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: