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!
- Get the RGB value of the pixel.
- Find the average of RGB i.e., Avg = (R+G+B)/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;
}
}
ADVERTISEMENT