PENGOLAHAN CITRA – Ch.3
M E N G O L A H C I T R A M E N J A D I G R A Y S C A L E
Bayu Pratama RN [ [email protected] ]
Tujuan Praktikum
- Mengetahui cara membuat program yang mengubah image berwarna ke grayscale
INFORMASI
Pada praktikum ke-3 ini
melanjutkan file yang telah kalian buat dari praktikum ke-2.
Sebelumnya lakukan kopi
folder proyek yang kalian buat dari praktikum ke-2 (
LatihanPengcit2
) ke folder
LatihanPengcit3
. Hal ini karena
LatihanPengcit2 nantinya akan digunakan lagi. (Jika kalian ingin membuat dari awal juga tidak apa-apa).
PEMBUATAN CITRA GRAYSCALE
Suatu citra digital memiliki format pixel yang berbeda-beda, dan bergantung juga pada tipe citranya. Ada
citra digital yang pixelnya hanya mendukung 1 bit (hitam dan putih), 8 bit grayscale, 8 bit warna, dan sampai
24 bit warna. Gambar dengan 24 bit warna terdiri atas 3 komponen yaitu Red (8bit), Green (8bit), dan Blue
(8bit). Jika ketiga-tiganya bernilai 0 maka hasilnya adalah hitam. Jika ketiganya bernilai 255 maka hasilnya
putih. Namun suatu citra berwarna 24bit juga dapat kita ubah menjadi citra grayscale 24bit.
Misalkan kita memiliki suatu pixel P dengan warna 24bit, maka nilai Grayscale dari Pixel P tersebut adalah
Gray = ( R + G + B ) / 3
Dimana R,G,B adalah nilai merah, hijau, biru dari pixel P tersebut. Jika kita sudah mendapatkan nilai Gray
nya, selanjutnya kita gantikan nilai R,G,B dengan nilai Gray tersebut
R = Gray
G = Gray
B = Gray
Algoritmanya adalah sebagai berikut
For I:=0 to ImageWidth -1
For J:=0 to ImageHeight -1
Color := GetPixel( I , J ) ; // mengambil pixel pada koordinat (I , J)
Gray := ( Color.Red + Color.Green + Color.Blue) / 3 ;
Color.Red := Gray ;
Color.Green := Gray;
Color.Blue := Gray;
SetPixel( I , J , Color) ; // mengubah pixel pada koordinat (I , J)
End For
Di bawah ini adalah perbandingan citra sebelum dan sesudah manipulasi grayscale
Sebelum
Sesudah
Histogram Red (Sebelum)
Histogram Red
Histogram Blue (Sebelum)
Histogram Blue
Gambar citra yang diubah dari warna menjadi grayscale akan memiliki histogram dengan
bentuk/pola yang sama antara histogram R, histogram G, dan histogram B. Hal ini dikarenakan hasil
perhitungan Gray = (R+G+B)/3 , yang mengakibatkan pada titik yang sama, nilai Red, Green, Blue
menjadi bernilai sama.
BAGAIMANA MEMBUAT PROGRAM YANG BISA MENGUBAH IMAGE KE DALAM GRAYSCALE?
Bagian ini melanjutkan source code yang telah dibuat dari praktikum ke-2.
1. Salin folder proyek kalian dan beri nama
LatihanPengcit3
.
2. Selanjutnya, buka folder baru tersebut. Untuk membuka proyek, kalian bisa melakukan double klik
pada file .
sln
atau file
.csproj
yang iconnya seperti di bawah ini
3. Proyek anda akan terbuka. Tugas anda selanjutnya adalah menambahkan sebuah Button ke dalam
Form dengan property sebagai berikut
Nama
Tipe
Property Name
Property Value
button3
Button
Text
GRAYSCALE
4.
Pada Form Designer, double klik tombol “GRAYSCALE”
5. Selanjutnya, anda akan berada dalam modus Source Code. Visual Studio akan secara otomatis
men-generate method yang sesuai dengan Event “Click” dari button1, yaitu
button3_Click
6. Kemudian Isikan potongan kode di bawah ini
7. Simpan proyek anda.
8. Jalankan program dengan menekan F5
9. Coba Anda tekan tombol “LOAD”, lalu anda pilih file gambar
11. Berikut ini adalah contoh screenshot nya jika anda berhasil
12. Silakan anda coba coba modifikasi sendiri tampilannya agar sesuai selera anda :P
Penjelasan :
Program di atas merupakan program sederhana untuk mengubah image warna ke grayscale. Setelah
pengguna me-load image dan kemudian menekan tombol “GRAYSCALE”, maka code di dalam method
“button3_Click” dijalankan. Proses tersebut sama dengan algoritma yang telah ditulis di atas.
Color
c
=
bm.GetPixel(
x,
y
);
Pada code diatas, program mengambil pixel pada koordinat tertentu. Pixel tersebut merubakan suatu object
dari class
Color,
dimana class
Color
memiliki property
R,G, dan B
.
Untuk membuat Grayscale, seperti yang telah dijelaskan sebelumnya, kita lakukan rata-rata dari R,G,B
int
Gray
=
(int)
(c.R
+
c.G
+
c.B)
/
3
;
Color
c2
=
Color.FromArgb(
c.A,
Gray,
Gray,
Gray
);
Jika sudah, hasil penghitungan kita ganti warna pixel dengan warna yang baru yang sudah Grayscale.
bm.SetPixel( x, y, c2 );
REFERENSI CLASS DAN METHOD YANG SERING DIGUNAKAN
Namespace
:
System.Drawing
Class :
Bitmap
Turunan dari Class :
Image
(Abstract Class)
public sealed class Bitmap : System.Drawing.Image
Member of System.Drawing
Summary:
Encapsulates a GDI+ bitmap, which consists of the pixel data for a graphics image and its attributes. A System.Drawing.Bitmap is an object used to work with images defined by pixel data.
Constructor :
public Bitmap(string filename)
Member of System.Drawing.Bitmap
Summary:
Initializes a new instance of the System.Drawing.Bitmap class from the specified file. Parameters:
filename: The name of the bitmap file. public Bitmap(int width, int height)
Member of System.Drawing.Bitmap
Summary:
Initializes a new instance of the System.Drawing.Bitmap class with the specified size. Parameters:
width: The width, in pixels, of the new System.Drawing.Bitmap. height: The height, in pixels, of the new System.Drawing.Bitmap.
Method :
public static System.Drawing.Image FromFile(string filename)
Member of System.Drawing.Image
Summary:
Creates an System.Drawing.Image from the specified file. Parameters:
filename: A string that contains the name of the file from which to create the System.Drawing.Image. Returns:
The System.Drawing.Image this method creates.
public System.Drawing.Color GetPixel(int x, int y)
Member of System.Drawing.Bitmap
Summary:
x: The x-coordinate of the pixel to retrieve. y: The y-coordinate of the pixel to retrieve. Returns:
A System.Drawing.Color structure that represents the color of the specified pixel.
public void Save(string filename)
Member of System.Drawing.Image
Summary:
Saves this System.Drawing.Image to the specified file or stream. Parameters:
filename: A string that contains the name of the file to which to save this System.Drawing.Image.
public void SetPixel(int x, int y, System.Drawing.Color color)
Member of System.Drawing.Bitmap
Summary:
Sets the color of the specified pixel in this System.Drawing.Bitmap. Parameters:
x: The x-coordinate of the pixel to set. y: The y-coordinate of the pixel to set.
color: A System.Drawing.Color structure that represents the color to assign to the specified pixel.
Property :
public intHeight { get; }
Member of System.Drawing.Image
Summary:
Gets the height, in pixels, of this System.Drawing.Image. Returns:
The height, in pixels, of this System.Drawing.Image.
public floatHorizontalResolution { get; }
Member of System.Drawing.Image
Summary:
Gets the horizontal resolution, in pixels per inch, of this System.Drawing.Image. Returns:
The horizontal resolution, in pixels per inch, of this System.Drawing.Image.
public System.Drawing.Imaging.PixelFormatPixelFormat { get; }
Member of System.Drawing.Image
Summary:
Gets the pixel format for this System.Drawing.Image. Returns:
public System.Drawing.Imaging.ImageFormatRawFormat { get; }
Member of System.Drawing.Image
Summary:
Gets the file format of this System.Drawing.Image. Returns:
The System.Drawing.Imaging.ImageFormat that represents the file format of this System.Drawing.Image.
public floatVerticalResolution { get; }
Member of System.Drawing.Image
Summary:
Gets the vertical resolution, in pixels per inch, of this System.Drawing.Image. Returns:
The vertical resolution, in pixels per inch, of this System.Drawing.Image.
public intWidth { get; }
Member of System.Drawing.Image
Summary:
Gets the width, in pixels, of this System.Drawing.Image. Returns:
The width, in pixels, of this System.Drawing.Image.
Namespace
:
System.Drawing
Struct :
Color
Turunan dari Class :
ValueType
(Abstract Class)
public struct Color
Member of System.Drawing
Summary:
Represents an ARGB (alpha, red, green, blue) color.
Constructor :
public Color()Member of System.Drawing.Color
Method :
public static System.Drawing.ColorFromArgb(int red, int green, int blue)
Member of System.Drawing.Color
Summary:
Creates a System.Drawing.Color structure from the specified 8-bit color values (red, green, and blue). The alpha value is implicitly 255 (fully opaque). Although this method allows a 32-bit value to be passed for each color component, the
Parameters:
red: The red component value for the new System.Drawing.Color. Valid values are 0 through 255. green: The green component value for the new System.Drawing.Color. Valid values are 0 through 255. blue: The blue component value for the new System.Drawing.Color. Valid values are 0 through 255. Returns:
The System.Drawing.Color that this method creates.
public static System.Drawing.ColorFromArgb(int alpha, System.Drawing.Color baseColor)
Member of System.Drawing.Color
Summary:
Creates a System.Drawing.Color structure from the specified System.Drawing.Color structure, but with the new specified alpha value. Although this method allows a 32-bit value to be passed for the alpha value, the value is limited to 8 bits.
Parameters:
alpha: The alpha value for the new System.Drawing.Color. Valid values are 0 through 255. baseColor: The System.Drawing.Color from which to create the new System.Drawing.Color. Returns:
The System.Drawing.Color that this method creates.
public static System.Drawing.ColorFromArgb(int alpha, int red, int green, int blue)
Member of System.Drawing.Color
Summary:
Creates a System.Drawing.Color structure from the four ARGB component (alpha, red, green, and blue) values.
Although this method allows a 32-bit value to be passed for each component, the value of each component is limited to 8 bits.
Parameters:
alpha: The alpha component. Valid values are 0 through 255. red: The red component. Valid values are 0 through 255. green: The green component. Valid values are 0 through 255. blue: The blue component. Valid values are 0 through 255. Returns:
The System.Drawing.Color that this method creates.
public floatGetBrightness()
Member of System.Drawing.Color
Summary:
Gets the hue-saturation-brightness (HSB) brightness value for this System.Drawing.Color structure. Returns:
The brightness of this System.Drawing.Color. The brightness ranges from 0.0 through 1.0, where 0.0 represents black and 1.0 represents white.
public floatGetHue()
Member of System.Drawing.Color
Summary:
The hue, in degrees, of this System.Drawing.Color. The hue is measured in degrees, ranging from 0.0 through 360.0, in HSB color space.
public floatGetSaturation()
Member of System.Drawing.Color
Summary:
Gets the hue-saturation-brightness (HSB) saturation value for this System.Drawing.Color structure. Returns:
The saturation of this System.Drawing.Color. The saturation ranges from 0.0 through 1.0, where 0.0 is grayscale and 1.0 is the most saturated.
Property :
public byteA { get; }
Member of System.Drawing.Color
Summary:
Gets the alpha component value of this System.Drawing.Color structure. Returns:
The alpha component value of this System.Drawing.Color.
public byteB { get; }
Member of System.Drawing.Color
Summary:
Gets the blue component value of this System.Drawing.Color structure. Returns:
The blue component value of this System.Drawing.Color.
public byteG { get; }
Member of System.Drawing.Color
Summary:
Gets the green component value of this System.Drawing.Color structure. Returns:
The green component value of this System.Drawing.Color.
public byteR { get; }
Member of System.Drawing.Color
Summary:
Gets the red component value of this System.Drawing.Color structure. Returns:
