C# - Spliting RGB-Color Channel of Image | WLC

C# - Spliting RGB-Color Channel of Image

Posted by ေတဇာလင္း Tuesday, 24 January 2017 0 comments

မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား အားလံုးပဲ မဂၤလာပါဗ်ာ။ ဒီေန႔ေတာ့ က်ေနာ္တို႔ Visual Studio C# ကို အသံုးျပဳၿပီး Image တစ္ခုရဲ႕ Color Channel ေတြကို ဘရ္လိုခြဲၾကည့္ႏိုင္မလဲ ဆိုတာေလးနဲ႔ ပါတ္သတ္ၿပီး ေလ့လာၾကည့္ၾကမွာ ျဖစ္ပါတရ္။ Image တစ္ခုဟာ 2D Array ပံုစံ pixel ေတြနဲ႔ ဖြဲ႔စည္းထားပါတရ္။ Array တစ္ကြက္စီက pixel တစ္ခုကို ကိုယ္စားျပဳပါတရ္။ ၄င္း pixel တစ္ကြက္ခ်င္းစီမွာရွိတဲ့ တန္ဖိုးေတြကေရာ ဘာေတြျဖစ္မလဲ။ Color တန္ဖိုးေတြေပါ့ဗ်ာ။ ေယဘုယ် အေနနဲ႔ေတာ့ Color တန္ဖိုးတစ္ခုစီဟာ Red, Green, Blue ဆိုတဲ့ Primitive Color သံုးခုနဲ႔ Alpha (Depth, Light) တန္ဖိုးတို႔နဲ႔ ဖြဲ႔စည္းထားတာပါ။ ဒီေလ့က်င့္ခန္းရဲ႕ ရည္ရြယ္ခ်က္ကေတာ့ Image တစ္ခုရဲ႕ piexl တစ္ကြက္စီတိုင္းမွာ ရွိေနတဲ့ Color တန္းဖိုးေတြကို သိဖို႔နဲ႔ မိမိလိုခ်င္တဲ့ Color Channel ကို ဆြဲထုတ္တတ္ဖို႔ ရည္ရြယ္ပါတရ္။ ေနာက္ပိုင္း Image Processing ပိုင္းကို ေလ့လာတဲ့အခ်ိန္ Color တန္ဖိုး အခ်ိန္းအေျပာင္းေတြ လုပ္ၿပီး Image Transform လုပ္တဲ့အခါ လြယ္ကူသြားေအာင္လို႔ပါဗ်ာ။ အခုအခ်ိန္ထိေတာ့ အားလံုးက အေျခခံေလးေတြပါပဲ။ က်ေနာ့္ ေလ့က်င့္ခန္းေတြက စတင္ေလ့လာသူမ်ားအတြက္သာ ရည္ရြယ္လို႔ သိၿပီးသား သူေတြအတြက္ နားလည္ေပးၾကဖို႔ ႀကိဳတင္ ေတာင္းပန္ထားပါရေစဗ်ာ။ ဒီေန႔ ေလ့က်င့္ခန္းအတြက္ က်ေနာ္ Button (၂)ခု၊ ComboBox (၁)ခုနဲ႔ PictureBox (၂)ခုကို အသံုးျပဳထားပါတရ္။ Tools ေတြရဲ႕ Properties ေတြကိုေတာ့ ေအာက္ပါ Table အတိုင္း ျပင္ယူလိုက္ၾကပါဗ်ာ။

PictureBox အတြင္းသို႔ Image ဆြဲတင္ျခင္းအပိုင္းနဲ႔ Image ကို Save ယူျခင္းအပိုင္းကိုေတာ့ ေရွ႕ သင္ခန္းစာေတြမွာ ေလ့လာခဲ့ၿပီးျဖစ္ပါတရ္။ ဒါေၾကာင့္ coding ေတြကို က်ေနာ္ မရွင္းေတာ့ပါဘူး။ ယခု ေလ့က်င့္ခန္းမွာေတာ့ မိတ္ေဆြ ဆြဲတင္ထားတဲ့ Image ကို ComboBox ထဲက Color Channel ကိုေရြးခ်ယ္ၿပီး မိမိ ေျပာင္းလဲေစခ်င္တဲ့ Color Channel အတိုင္းေျပာင္းယူတဲ့ ပံုစံနဲ႔ ေလ့လာၾကည့္မွာပါ။ GUI ပံုစံကိုေတာ့ ေအာက္ကပံုမွာ ၾကည့္ႏိုင္ပါတရ္။

စဥ္းစားပံုကေတာ့ မိတ္ေဆြေရြးခ်ယ္လိုက္တဲ့ Image ရဲ႕ Pixel တစ္ကြက္ခ်င္းစီထဲမွာရွိတဲ့ ARGB Color တန္ဖိုးေတြကို ရွာပါတရ္။ ရွာလို႔ရတဲ့ Color တန္ဖိုးေတြထဲကမွ မိမိ ေျပာင္းလဲေစခ်င္ေသာ Color Channel ကိုသာခ်န္ၿပီး က်န္တဲ့ Color တန္ဖုိးေတြကို သုည(0) ေပးၿပီး ျပန္ Set လုပ္လိုက္တာပါပဲဗ်ာ။ က်ေနာ္တို႔ လိုခ်င္တဲ့ Color Channel အေပၚမူတည္ၿပီး Pixel တစ္ကြက္ခ်င္းစီမွာရွိတဲ့ Color တန္ဖိုးေတြက ေျပာင္းလဲသြားမွာပါ။ ဥပမာ ARGB(255, 100, 45, 72) ထဲက က်ေနာ္တို႔က Blue Channel ေျပာင္းခ်င္တရ္ဆိုပါစို႔။ Pixel တစ္ကြက္ခ်င္းစီမွ ရလာတဲ့ ARGB Color တန္ဖိုးေတြထဲက ARGB(255, 0, 0, 72) Red နဲ႔ Green ကို သုည(0) ေပးၿပီး က်န္ Apha နဲ႔ Blue တန္ဖိုးကို ျပန္ Set လုပ္လိုက္တာပါ။ ComboBox ရဲ႕ SelectedIndex အခ်ိန္းအေျပာင္းေပၚ မူတည္ၿပီး Image ရဲ႕ Color Channel ေျပာင္းလဲမႈကို ခ်က္ခ်င္းျပခ်င္တာျဖစ္တဲ့အတြက္ Calling Mehtod ကို ComboBox ရဲ႕ SelectedIndexChanged_Event ထဲမွာ ၀င္ေရးထားပါတရ္။ Channel အခ်ိန္းအေျပာင္း လုပ္ငန္းစဥ္ကိုေတာ့ သီးသန္႔ Method ခြဲၿပီးေရးထားပါတရ္။ Method ထဲကို Image နဲ႔ Channel ကို Parameter Passing လုပ္ထားပါတရ္။ တြက္ခ်က္ၿပီးရင္ေတာ့ ေနာက္ဆံုး Result အျဖစ္ Image ကို Return ျပန္ေပးမွာျဖစ္ပါတရ္။ Result ကို ပံု(၂)မွာၾကည့္ပါ။

မိတ္ေဆြတို႔ ေသခ်ာနားလည္သြားေအာင္ GetChannelImage() Mehtod ရဲ႕ Coding ကိုေအာက္မွာ ေဖာ္ျပေပးထားပါတရ္။

public Image GetChannelImage(Image inputImg, string channel )
{
  Bitmap cloneImg = new Bitmap(inputImg);
  Bitmap outputImg = new Bitmap(cloneImg);
  for (int y = 0; y < cloneImg.Height; y++)
  {
    for (int x = 0; x < cloneImg.Width; x++)
    {
      Color colorPixel = cloneImg.GetPixel(x, y);
      int a = colorPixel.A;
      int r = colorPixel.R;
      int g = colorPixel.G;
      int b = colorPixel.B;
      switch (channel)
      {
        case "Red": outputImg.SetPixel(x, y, Color.FromArgb(a, r, 0, 0)); break;
        case "Green": outputImg.SetPixel(x, y, Color.FromArgb(a, 0, g, 0)); break;
        case "Blue": outputImg.SetPixel(x, y, Color.FromArgb(a, 0, 0, b)); break;
        default:
          break;
      } 
    }
  }
  return outputImg;
}

ဒီမွာ အလုပ္ လုပ္သြားတဲ့ပံုစံကေတာ့ ပထမအဆင့္မွာ မိတ္ေဆြတို႔ ပို႔ေပးလိုက္တဲ့ Image ကို Image ရဲ႕ အေျခခံအက်ဆံုး Format ျဖစ္တဲ့ Bitmap အျဖစ္ ေျပာင္းလဲယူပါတရ္။ ဒုတိယအဆင့္မွာေတာ့ For Loop ကို အသံုးျပဳၿပီး Image ရဲ႕ Pixel တစ္ကြက္ခ်င္းစီကို loop ပါတ္ၿပီး ဖတ္ပါတရ္။ တစ္ဆက္တည္းမွာပဲ GetPixel()Method ကိုအသံုးျပဳၿပီး Pixel တစ္ကြက္ခ်င္းစီမွာရွိတဲ့ Color တန္ဖိုးေတြကို မွတ္ယူပါတရ္။ တတိယအဆင့္မွာေတာ့ မိတ္ေဆြတို႔ ေရြးခ်ယ္လိုက္တဲ့ Color Channel အေပၚမူတည္ၿပီး Pixel တစ္ကြက္ခ်င္းစီရဲ႕ New Color တန္ဖိုးေတြကို ျပန္ Set လုပ္ပါတရ္။ Pixel အားလံုး Color Change ၿပီးသြားၿပီဆိုရင္ေတာ့ Loop ကထြက္သြားမွာပါ။ ေနာက္ဆံုးအဆင့္မွာေတာ့ က်ေနာ္တို႔ Color ခ်ိန္းၿပီးသား Image တစ္ခုကို Bitmap ထဲထည့္ၿပီး Image Type အျဖစ္ Return ျပန္ေပးလိုက္တာပဲျဖစ္ပါတရ္ဗ်ာ။ နားလည္းႏိုင္ၾကလိမ့္မရ္လို႔ ေမွ်ာ္လင့္ပါတရ္။

GetChannelImage() Method ဖန္တီးျခင္းအပိုင္းကို သိၿပီဆိုရင္ေတာ့ ၄င္း Method ကို ဘရ္လို ျပန္ေခၚသံုးမလဲဆုိတာေလးကို ေလ့လာၾကည့္ပါ့မရ္။ ComboBox ကို D_Click ေပးၿပီး SelectedIndexChanged_Event ထဲမွာ ၀င္ေရးလိုက္ပါဗ်ာ။

private void cbColorChannel_SelectedIndexChanged(object sender, EventArgs e)
{
  picChannelImg.Image = GetChannelImage(picOriginalImg.Image, cbColorChannel.Text);
}

ခက္ခက္ခဲခဲ မရွိပါဘူးဗ်ာ။ Prarmeter Passing လုပ္ေပးရမဲ့ Image နဲ႔ Channel ကို Initial လုပ္ၿပီး Method ကို ေခၚလိုက္တာပါ။ Method က Image Return ျပန္ေပးမွာျဖစ္တဲ့အတြက္ Image အေနနဲ႔ ျပန္ဖမ္းယံုပါပဲ။ ရလာတဲ့ Image ကိုေတာ့ ဒုတိယ PictureBox ျဖစ္တဲ့ picChannelImg ထဲကို Add ေပးလိုက္တာပါ။
မိတ္ေဆြတို႔ ပိုၿပီး နားလည္သြားေအာင္ Coding အျပည့္အစံုကို ေအာက္မွာ ေလ့လာၾကည့္လိုက္ၾကပါအံုးဗ်ာ။

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

namespace ImgProcessing
{
    public partial class frmImgColorChannel : Form
    {
        public frmImgColorChannel()
        {
            InitializeComponent();
        }

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

        public void LoadPicture(PictureBox pic)
        {
            OpenFileDialog openFD = new OpenFileDialog();
            openFD.Title = "Insert an Image";
            openFD.Filter = "JPEG Images|*.jpg|PNG Images |*.png|Gif Image|*.gif";
            if (openFD.ShowDialog() == DialogResult.OK)
            {
                pic.Image = Image.FromFile(openFD.FileName);
            }
        }

        private void btnSaveImage_Click(object sender, EventArgs e)
        {
            SaveImage(picChannelImg.Image);
        }

        public void SaveImage(Image img)
        {
            SaveFileDialog saveFD = new SaveFileDialog();
            saveFD.Title = "Save an Image";
            saveFD.Filter = "Bitmap(*.bmp)|*.Bmp|Joint Photographic Experts Group(*.jpeg)|*.Jpeg|Portable Network Graphics(*.png)|*.Png|Tagged Image File Format(*.tiff)|*.Tiff|Graphics Interchange Format(*.gif)|*.Gif";
            if (saveFD.ShowDialog() == DialogResult.OK)
            {
                FileStream fileLocation = (FileStream)saveFD.OpenFile();
                switch (saveFD.FilterIndex)
                {
                    case 1: img.Save(fileLocation, ImageFormat.Bmp); break;
                    case 2: img.Save(fileLocation, ImageFormat.Jpeg); break;
                    case 3: img.Save(fileLocation, ImageFormat.Png); break;
                    case 4: img.Save(fileLocation, ImageFormat.Tiff); break;
                    case 5: img.Save(fileLocation, ImageFormat.Gif); break;
                }
            }
        }

        private void cbColorChannel_SelectedIndexChanged(object sender, EventArgs e)
        {
            picChannelImg.Image = GetChannelImage(picOriginalImg.Image, cbColorChannel.Text);
        }

        public Image GetChannelImage(Image inputImg, string channel )
        {
            Bitmap cloneImg = new Bitmap(inputImg);
            Bitmap outputImg = new Bitmap(cloneImg);

            for (int y = 0; y < cloneImg.Height; y++)
            {
                for (int x = 0; x < cloneImg.Width; x++)
                {
                    Color colorPixel = cloneImg.GetPixel(x, y);
                    int a = colorPixel.A;
                    int r = colorPixel.R;
                    int g = colorPixel.G;
                    int b = colorPixel.B;
                    
                    switch (channel)
                    {
                        case "Red": outputImg.SetPixel(x, y, Color.FromArgb(a, r, 0, 0)); break;
                        case "Green": outputImg.SetPixel(x, y, Color.FromArgb(a, 0, g, 0)); break;
                        case "Blue": outputImg.SetPixel(x, y, Color.FromArgb(a, 0, 0, b)); break;
                        default:
                            break;
                    }                    
                }
            }
            return outputImg;
        }

    }
}

ကဲ... ဒီေလာက္ဆိုရင္ေတာ့ မိတ္ေဆြတို႔အေနနဲ႔ Image တစ္ခုရဲ႕ မိမိစိတ္ႀကိဳက္ Color Channel ခြဲၿပီး ၾကည့္တတ္ၿပီလို႔ ထင္ပါတရ္ဗ်ာ။ က်ေနာ့္ အားနည္းခ်က္မ်ားရွိခဲ့ရင္လည္း ျပန္လည္ ေထာက္ျပေပးၾကပါဗ်ာ။ မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမအားလံုး ေလ့လာျခင္းျဖင့္ ေက်နပ္ႏိုင္ၾကပါေစ။