C# - Image Processing (Bi-Tonal Color Algorithm)

Posted by ေတဇာလင္း Tuesday 7 March 2017 0 comments

မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား အားလံုးပဲ မဂၤလာပါဗ်ာ။ ဒီေန႔ေတာ့ က်ေနာ္တို႔ Visual Studio C# နဲ႔ Image တစ္ခုအား မိမိႏွစ္သက္ရာ Color ႏွစ္ခုတည္းျဖင့္ ဘရ္လို ရုပ္လံုးေဖာ္ၾကည့္ႏိုင္မလဲ ဆိုတာေလးကို ေလ့လာၾကည့္ပါ့မရ္။ နည္းပညာ Term အရေတာ့ BiTonal Color Algorithm လို႔ေခၚပါတရ္။ က်ေနာ့္ ေလ့က်င့္ခန္းေတြကေတာ့ စတင္ ေလ့လာသူမ်ားအတြက္သာ ရည္ရြယ္ပါတရ္။ ဒါေၾကာင့္ သိေနၿပီးသား သူမ်ားအေနနဲ႔ နားလည္ေပးၾကဖို႔နဲ႔ က်ေနာ္ရဲ႕ တင္ျပပံု မွားယြင္းတာမ်ားရွိခဲ့ရင္ ျပန္လည္ေထာက္ျပေပးႏိုင္ဖို႔ ေမွ်ာ္လင့္ပါတရ္ဗ်။

Algorithm ရဲ႕ သေဘာတရားကေတာ့ က်ေနာ္တို႔ ေရွ႕မွာ ေလ့လာခဲ့ၿပီးျဖစ္တဲ့ Binary Color သို႔မဟုတ္ Black&White Algorithm နဲ႔ အတူတူပါပဲ။ ေလ့လာခဲ့ၿပီးသား မိတ္ေဆြတို႔အေနနဲ႔ ဒီေန႔ ေလ့က်င့္ခန္းက အရမ္းကို လြယ္ကူေနပါလိမ့္မရ္။ Black&White တုန္းက 1 and 0 သို႔မဟုတ္ Color ရဲ႕ Lower bound and Upper bound ႏွစ္ခုတည္းမွာပဲ အလုပ္လုပ္ပါတရ္။ ဒီေန႔ ေလ့က်င့္ခန္းမွာေတာ့ Algorithm ထဲသို႔ မိမိႀကိဳက္ႏွစ္သက္ရာ Color ႏွစ္ခုကို Passing လုပ္ၿပီး Processing လုပ္ႏိုင္မွာျဖစ္ပါတရ္။ Color ႏွစ္ခုျဖစ္တဲ့အတြက္ Threshold Value တစ္ခုနဲ႔ ပိုင္းျခားၿပီး ရုပ္လံုးေဖာ္မွာပါ။ Algorithm ရဲ႕ လုပ္ငန္းစဥ္ေတြကေတာ့ ေအာက္ပါအတိုင္းပဲျဖစ္ပါတရ္ဗ်။

Algorithm:
1. Get the RGB value of the pixel.
2. Calculate Average of RGB(Average=(R+G+B)/3).
3. Calculate new RGB values as follows:
        If Average >= Thershold Then
                RGB = Color1
 Else
  RGB = Color2
4. Replace the R, G and B value of the pixel with the values calculated in step 3.
5. Repeat Step 1 to Step 4 for each pixels of the image.

Example: 
 Pixel = RGB(120, 80, 200);
 BiTonal Processing => 
        Threshold = 20; Color1 = gold; Color2=orange;
  Average = (120+80+200)/3; = 133;
  If(Average >= Threshold)
   Pixel(RGB) = gold;

အနည္းငယ္ ရွင္းျပရမရ္ဆိုရင္ေတာ့... ပထမဦးဆံုး Pixel ကို Detect လုပ္ၿပီး RGB Color Value ေတြကို ဆြဲထုတ္ပါတရ္။ ဒုတိယအဆင့္မွာေတာ့ ရလာတဲ့ RGB Color Value ေတြကို Average ရွာၿပီး Threshold Value နဲ႔ ႏႈိင္းယွဥ္ပါတရ္။ Average တန္ဖိုးက ႀကီးခဲ့ရင္ေတာ့ ၄င္း Pixel ကို Color1 နဲ႔ Assign လုပ္ပါတရ္။ Threshold ကႀကီးေနမရ္ဆိုရင္ေတာ့ ၄င္း Pxiel ကို Color2 နဲ႔ Assign လုပ္ယူလိုက္တာပဲျဖစ္ပါတရ္။ ဒီနည္းအတိုင္း last Pixel ေရာက္သည္အထိ တြက္ထုတ္ၿပီး BiTonal Image တစ္ခုအျဖစ္ ဖန္တီးယူလိုက္တာပဲ ျဖစ္ပါတရ္ဗ်။ ဥပမာအေနနဲ႔ေတာ့ က်ေနာ္ Pixel တစ္ခုစာ တြက္ျပထားပါတရ္။ နားလည္မရ္လို႔ ေမွ်ာ္လင့္ပါတရ္ဗ်။

ကဲ... ဒီေလာက္ဆိုရင္ေတာ့ BiTonal Algorithm ရဲ႕ သေဘာတရားကို သိၿပီလို႔ ထင္ပါတရ္။ က်ေနာ္တို႔ GUI ေဖာက္ Coding ေရးၿပီး လက္ေတြ႔ေလ့လာၾကည့္ရေအာင္။ ဒါကေတာ့ က်ေနာ္တို႔ Project မွာ အသံုးျပဳမရ္ Library File ေတြပါ။

using System;
using System.Drawing;
using System.Windows.Forms;
using System.Drawing.Imaging;

ဒီေန႔ ေလ့က်င့္ခန္းအတြက္ GUI တည္ေဆာက္ျခင္းအပိုင္းမွာေတာ့ က်ေနာ္ Button(1)ခုနဲ႔ PictureBox(2)ခု၊ Panel(2)ခု၊ TrackBar(1)ခုနဲ႔ Label(1)ခုကို အသံုးျပဳထားပါတရ္။ Tools ေတြရဲ႕ Properties ေတြကိုေတာ့ ေအာက္က Table အတိုင္း ျပင္ယူလိုက္ၾကပါဗ်ာ။

က်ေနာ္ကေတာ့ ေအာက္ကပံုအတိုင္း ပံုစံခ်ထားပါတရ္ဗ်ာ။ မိတ္ေဆြတို႔အေနနဲ႔ေတာ့ GUI ကို ႀကိဳက္သလို ပံုေဖာ္ ဖန္တီးႏိုင္ပါတရ္ဗ်။

က်ေနာ္တို႔ ရုပ္လံုးေဖာ္မည့္ Color ႏွစ္ခုကိုဆြဲတင္ဖို႔အတြက္ေတာ့ Panel Box ႏွစ္ခုကို သံုးထားပါတရ္။ Panel Box ရဲ႕ Click_Event ေတြမွာ ColorDialog Box ေတြကိုေခၚၿပီး မိမိႏွစ္သက္ရာ Color ကိုေရြးခ်ယ္မွာျဖစ္ပါတရ္။ က်ေနာ္ကေတာ့ Color Loading အတြက္ Method ခြဲေရးထားပါတရ္။ ေအာက္မွာ ေလ့လာၾကည့္လုိက္ပါဗ်ာ။

       Color firstColor, secondColor;
       private void pnColor1_Click(object sender, EventArgs e)
       {
           firstColor = LoadColor();
           pnColor1.BackColor = firstColor;
       }

       private void pnColor2_Click(object sender, EventArgs e)
       {
           secondColor = LoadColor();
           pnColor2.BackColor = secondColor;
       }

       public Color LoadColor()
       {
           ColorDialog colorD = new ColorDialog();
           Color returnColor = Color.Empty;
           if (colorD.ShowDialog() == DialogResult.OK) {
               returnColor = colorD.Color;
           }
           return returnColor;
       }

က်ေနာ္တို႔ စစခ်င္းမွာ Global အေနနဲ႔ Coloar Variable ႏွစ္ခုကိုေၾကျငာထားပါတရ္။ က်ေနာ္တို႔ ဆြဲတင္ယူမရ္႕ Color ႏွစ္ခုကို ၄င္း Variable ႏွစ္ခုနဲ႔ Assign လုပ္ၿပီး Algorithm ကို Passing လုပ္မွာျဖစ္ပါတရ္။ LoadColor()Method က ရိုးရွင္းပါတရ္။ ColorDialog Box ကိုေခၚၿပီး ေရြးခ်ယ္လိုက္တဲ့ Color ကို Calling Mehtod သို႔ Return ျပန္ေပးယံုပါပဲ။ Calling Method အေနနဲ႔ေတာ့ Panel ႏွစ္ခုရဲ႕ Click_Event ေတြက ေခၚထားပါတရ္။ ဒါအျပင္ ဘရ္လို Color ေတြကို ေရြးခ်ယ္လုိက္တရ္ဆိုတာကို User အေနနဲ႔ ျမင္ေတြ႔ႏိုင္ဖို႔အတြက္ Panel ေတြရဲ႕ Background Color ေတြအျဖစ္ ျပန္ဆြဲတင္ ျပထားပါေသးတရ္ဗ်။ ခက္ခဲတာမပါလို႔ နားလည္လိမ့္မရ္လို႔ ယံုၾကည္ပါတရ္ဗ်။

BiTonal Image ေျပာင္းလဲယူမရ္႕ Method ကိုေတာ့ TrackBar ရဲ႕ Scroll_Event ထဲမွာေရးပါတရ္။ ဒါေၾကာင့္ TrackBar Value ေျပာင္းလဲမႈရွိတိုင္း Image Result ေျပာင္းလဲမႈရွိပါလိမ့္မရ္ဗ်။

public Image CustomBiTonalColor(Image inputImg, int threshold, Color color1, Color color2)
{
           Bitmap cloneImg = new Bitmap(inputImg);
           Rectangle rect = new Rectangle(0, 0, cloneImg.Width, cloneImg.Height);
           BitmapData bmpData = cloneImg.LockBits(rect, ImageLockMode.ReadWrite, PixelFormat.Format24bppRgb);
           unsafe {
               byte* firstAddress = (byte*)bmpData.Scan0;
               for (int y = 0; y < bmpData.Height; y++) {
                   byte* currentAddress = firstAddress + (y * bmpData.Stride);
                   for (int x = 0; x < bmpData.Stride; x = x + 3) {
                       int averageColor = (currentAddress[x] + currentAddress[x + 1] + currentAddress[x + 2]) / 3;
                       if (averageColor >= threshold) {
                           currentAddress[x] = color1.B;
                           currentAddress[x + 1] = color1.G;
                           currentAddress[x + 2] = color1.R;
                       } else {
                           currentAddress[x] = color2.B;
                           currentAddress[x + 1] = color2.G;
                           currentAddress[x + 2] = color2.R;
                       }
                   }
               }
               cloneImg.UnlockBits(bmpData);
               return cloneImg;
           }
}

Method ကိုေတာ့ Processing လုပ္မရ္႕ Image, Threshold Value နဲ႔ Color Value ႏွစ္ခုကုိ Parameter Passing လုပ္ထားပါတရ္။ Pixel Detection လုပ္တဲ့ လုပ္ငန္းစဥ္ကိုေတာ့ က်ေနာ္တို႔ ေရွ႕မွာေလ့လာခဲ့ၿပီးျဖစ္တဲ့ Fast Image Processing ေလ့က်င့္ခန္းအတိုင္း Detect လုပ္ထားပါတရ္။ နားမလည္ေသးတဲ့ မိတ္ေဆြတို႔အတြက္ ေရွ႕သင္ခန္းစာေတြကို ျပန္ဖတ္ေပးပါလို႔ တိုက္တြန္းပါရေစ။ BiTonal Color ခြဲၿပီး Assign လုပ္သြားပံုအဆင့္ဆင့္ကိုေတာ့ က်ေနာ္ အေပၚမွာ ဥပမာနဲ႔ အေသစိတ္ရွင္းျပခဲ့ပါတရ္။ Calling Method ေလးကို ဆက္ၾကည့္ၾကရေအာင္ဗ်ာ။

private void tbThresholdValue_Scroll(object sender, EventArgs e)
{
     lblThresholdValue.Text = tbThresholdValue.Value.ToString();
     if (picOriginalImg.Image != null) {
        picResultImg.Image = CustomBiTonalColor(picOriginalImg.Image, tbThresholdValue.Value, firstColor, secondColor);
     }        
}

ဒါကေေတာ့ TrackBar သို႔မဟုတ္ Threshold Value ရဲ႕ ေျပာင္းလဲအမႈအေပၚ မူတည္ၿပီး BiTonal Image ေျပာင္းလဲယူဖို႔အတြက္ Calling Method အေျခအေနပါ။ ေျပာင္းလဲသြားတဲ့ Threshold Value ကိုေတာ့ label နဲ႔ Infornation ထုတ္ျပထားပါတရ္။ if( )statement နဲ႔စစ္ထားတာကေတာ့ Processing လုပ္မရ္႕ Image ကုိဆြဲတင္ၿပီး ရွိ/မရွိ သိခ်င္လို႔ပါ။ မိတ္ေဆြတို႔ အားလံုးကို ၿခံဳငံုနားလည္သြားေအာင္ ေအာက္မွာ Coding အျပည့္အစံုကို ေလ့လာႏိုင္ပါတရ္ဗ်။

using System;
using System.Drawing;
using System.Windows.Forms;
using System.Drawing.Imaging;
namespace ImgProcessing
{
   public partial class frmCustomBiTonalColor : Form
   {
       public frmCustomBiTonalColor()
       {
           InitializeComponent();
       }

       private void btnLoadImage_Click(object sender, EventArgs e)
       {
           LoadImage(picOriginalImg);
       }

       public void LoadImage(PictureBox pic)
       {
           OpenFileDialog openFD = new OpenFileDialog();
           openFD.Title = "Load an Image";
           openFD.Filter = "JPEG Images|*.Jpg|PNG Images|*.Png|GIF Images|*.Gif|BITMAP Images|*.Bmp";
           if (openFD.ShowDialog() == DialogResult.OK) {
               pic.Image = Image.FromFile(openFD.FileName);
           }
       }

       Color firstColor, secondColor;
       private void pnColor1_Click(object sender, EventArgs e)
       {
           firstColor = LoadColor();
           pnColor1.BackColor = firstColor;
       }

       private void pnColor2_Click(object sender, EventArgs e)
       {
           secondColor = LoadColor();
           pnColor2.BackColor = secondColor;
       }

       public Color LoadColor()
       {
           ColorDialog colorD = new ColorDialog();
           Color returnColor = Color.Empty;
           if (colorD.ShowDialog() == DialogResult.OK) {
               returnColor = colorD.Color;
           }
           return returnColor;
       }

       private void tbThresholdValue_Scroll(object sender, EventArgs e)
       {
           lblThresholdValue.Text = tbThresholdValue.Value.ToString();
           if (picOriginalImg.Image != null) {
               picResultImg.Image = CustomBiTonalColor(picOriginalImg.Image, tbThresholdValue.Value, firstColor, secondColor);
           }        
       }

       public Image CustomBiTonalColor(Image inputImg, int threshold, Color color1, Color color2)
       {
           Bitmap cloneImg = new Bitmap(inputImg);
           Rectangle rect = new Rectangle(0, 0, cloneImg.Width, cloneImg.Height);
           BitmapData bmpData = cloneImg.LockBits(rect, ImageLockMode.ReadWrite, PixelFormat.Format24bppRgb);
           unsafe {
               byte* firstAddress = (byte*)bmpData.Scan0;
               for (int y = 0; y < bmpData.Height; y++) {
                   byte* currentAddress = firstAddress + (y * bmpData.Stride);
                   for (int x = 0; x < bmpData.Stride; x = x + 3) {
                       int averageColor = (currentAddress[x] + currentAddress[x + 1] + currentAddress[x + 2]) / 3;
                       if (averageColor >= threshold) {
                           currentAddress[x] = color1.B;
                           currentAddress[x + 1] = color1.G;
                           currentAddress[x + 2] = color1.R;
                       } else {
                           currentAddress[x] = color2.B;
                           currentAddress[x + 1] = color2.G;
                           currentAddress[x + 2] = color2.R;
                       }
                   }
               }
               cloneImg.UnlockBits(bmpData);
               return cloneImg;
           }
       }        
   }
}

မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုး ေလ့လာျခင္းျဖင့္ ေက်နပ္ႏိုင္ၾကပါေစ။