How to convert a color image into grayscale image in C# using Visual Studio

C# Project

In this project we are learning to convert a color image into grayscale image.

Requirement

For this project we will need Microsoft Visual Studio

Introduction

Before we start our grayscale topic lets take a Quick Intro.

A pixel is made up of 4 components Alpha
Red
Green
Blue

Alpha determines the transparency while Red, Green and Blue determines the color of the pixel. We can denote these 4 components as
Alpha – A
Red – R
Green – G
Blue – B

Each of these 4 components (ARGB) has a value between 0 to 255.
0 means the component is missing. While 255 means the component is fully present. We can represent the value 0 to 255 using 8 bits. So each component can be represented using 8 bits.

Therefore, we will need 32 bits to represent a pixel.

For a 2D image we will have pixels arranged in rows and columns. Origin (starting pixel) of the image is at the coordinate (0,0).

So, we can denote a pixel (x,y) as Px,y(A,R,G,B)

Where, (x,y) is the co-ordinate of the pixel and A, R, G and B denote the Alpha, Red, Green and Blue value of the pixel respectively.

Example: P0,0(255,100,150,200) represents a pixel at co-ordinate (0,0) having A = 255, R = 100, G = 150 and B = 200.

Grayscale

Converting a color image into grayscale image is very simple. All we have to do is follow 3 simple steps!

  1. Get the RGB value of the pixel.
  2. Find the average of RGB i.e., Avg = (R+G+B)/3
  3. Replace the R, G and B value of the pixel with average (Avg) calculated in step 2.

Example:

Consider a color pixel with the following values A = 255
R = 100
G = 150
B = 200

Where A, R, G and B represents the Alpha, Red, Green and Blue value of the pixel.
Remember! ARGB will have an integer value in the range 0 to 255.
So, to convert the color pixel into grayscale pixel we have to first find the average of R, G and B.
Average, Avg = (R+G+B)/3
i.e., Avg = (100+150+200)/3 = 150
Now we will replace the value of R, G and B with the average value that we calculated for the pixel.
So, the new pixel value will be
A = 255
R = 150
G = 150
B = 150
Note! We don't have to change the alpha value because it only controls the transparency of the pixel.
Hence, for a grayscale image the RED, GREEN and BLUE component of a given pixel is same.

Form1.cs


using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace Grayscale
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            //read image
            Bitmap bmp = new Bitmap("D:\\Image\\Taj.jpg");

            //load original image in picturebox1
            pictureBox1.Image = Image.FromFile("D:\\Image\\Taj.jpg");

            //get image dimension
            int width = bmp.Width;
            int height = bmp.Height;

            //color of pixel
            Color p;

            //grayscale
            for (int y = 0; y < height; y++)
            {
                for (int x = 0; x < width; x++)
                {
                    //get pixel value
                    p = bmp.GetPixel(x, y);

                    //extract pixel component ARGB
                    int a = p.A;
                    int r = p.R;
                    int g = p.G;
                    int b = p.B;

                    //find average
                    int avg = (r + g + b) / 3;

                    //set new pixel value
                    bmp.SetPixel(x, y, Color.FromArgb(a, avg, avg, avg));
                }
            }

            //load grayscale image in picturebox2
            pictureBox2.Image = bmp;

            //write the grayscale image
            bmp.Save("D:\\Image\\Grayscale.png");
        }
    }
}

Form1.Designer.cs


namespace Grayscale
{
    partial class Form1
    {
        /// <summary>
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.pictureBox1 = new System.Windows.Forms.PictureBox();
            this.pictureBox2 = new System.Windows.Forms.PictureBox();
            this.label1 = new System.Windows.Forms.Label();
            this.label2 = new System.Windows.Forms.Label();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox1)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox2)).BeginInit();
            this.SuspendLayout();
            // 
            // pictureBox1
            // 
            this.pictureBox1.Location = new System.Drawing.Point(12, 12);
            this.pictureBox1.Name = "pictureBox1";
            this.pictureBox1.Size = new System.Drawing.Size(285, 300);
            this.pictureBox1.SizeMode = System.Windows.Forms.PictureBoxSizeMode.Zoom;
            this.pictureBox1.TabIndex = 0;
            this.pictureBox1.TabStop = false;
            // 
            // pictureBox2
            // 
            this.pictureBox2.Location = new System.Drawing.Point(327, 12);
            this.pictureBox2.Name = "pictureBox2";
            this.pictureBox2.Size = new System.Drawing.Size(285, 300);
            this.pictureBox2.SizeMode = System.Windows.Forms.PictureBoxSizeMode.Zoom;
            this.pictureBox2.TabIndex = 1;
            this.pictureBox2.TabStop = false;
            // 
            // label1
            // 
            this.label1.AutoSize = true;
            this.label1.Font = new System.Drawing.Font("Microsoft Sans Serif", 14.25F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
            this.label1.Location = new System.Drawing.Point(108, 330);
            this.label1.Name = "label1";
            this.label1.Size = new System.Drawing.Size(75, 24);
            this.label1.TabIndex = 2;
            this.label1.Text = "Original";
            // 
            // label2
            // 
            this.label2.AutoSize = true;
            this.label2.Font = new System.Drawing.Font("Microsoft Sans Serif", 14.25F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
            this.label2.Location = new System.Drawing.Point(431, 330);
            this.label2.Name = "label2";
            this.label2.Size = new System.Drawing.Size(93, 24);
            this.label2.TabIndex = 3;
            this.label2.Text = "Grayscale";
            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(624, 363);
            this.Controls.Add(this.label2);
            this.Controls.Add(this.label1);
            this.Controls.Add(this.pictureBox2);
            this.Controls.Add(this.pictureBox1);
            this.Name = "Form1";
            this.StartPosition = System.Windows.Forms.FormStartPosition.CenterScreen;
            this.Text = "Grayscale";
            this.Load += new System.EventHandler(this.Form1_Load);
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox1)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox2)).EndInit();
            this.ResumeLayout(false);
            this.PerformLayout();

        }

        #endregion

        private System.Windows.Forms.PictureBox pictureBox1;
        private System.Windows.Forms.PictureBox pictureBox2;
        private System.Windows.Forms.Label label1;
        private System.Windows.Forms.Label label2;
    }
}