C# - Crop Image Rectangle Shape using Graphics

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

မိတ္ေဆြ၊ ညီအစ္ကို၊ ေမာင္ႏွမမ်ား အားလံုးပဲ မဂၤလာပါဗ်ာ။ ဒီေန႔ေတာ့ က်ေနာ္တို႔ Visual Studio C# ကို အသံုးျပဳၿပီး Image တစ္ခုကို မိမိႏွစ္သက္ရာေနရာအား Rectangle ပံုစံျဖစ္ ဘရ္လိုျဖတ္ယူႏိုင္မလဲဆိုတာေလးကို ေလ့လာၾကည့္ပါ့မရ္။ နည္းလမ္းေပါင္းစံု ရွိတဲ့အထဲကေနၿပီ အလြရ္ကူဆံုးနည္းလမ္းျဖစ္တဲ့ Graphic Library ေအာက္က DrawImage() Method ကို အသံုးျပဳၿပီး ေလ့လာၾကည့္ပါ့မရ္။ က်ေနာ့္ ေလ့က်င့္ခန္းေတြကေတာ့ စတင္ ေလ့လာသူမ်ားအတြက္သာ ရည္ရြယ္ပါတရ္။ ဒါေၾကာင့္ သိေနၿပီးသား သူမ်ားအေနနဲ႔ နားလည္ေပးၾကဖို႔နဲ႔ က်ေနာ္ရဲ႕ တင္ျပပံု မွားယြင္းတာမ်ားရွိခဲ့ရင္ ျပန္လည္ေထာက္ျပေပးႏိုင္ဖို႔ ေမွ်ာ္လင့္ပါတရ္ဗ်။

ဒါကေတာ့ က်ေနာ္တို႔ Project မွာ အသံုးျပဳမရ္ Library File ေတြပါ။

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

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

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

ဒီေန႔ ေလ့က်င့္ခန္းမွာေတာ့ Crop Processing အတြက္ သီးသန္႔ Button မထည့္ေတာ့ပဲ picOriginalImg ရဲ႕ Event ေတြကပဲ Processing လွမ္းလုပ္တဲ့ ပံုစံေလးနဲ႔ ေလ့လာၾကည့္သြားပါ့မရ္။ အသံုးျပဳသြားမရ္႕ Event ေတြကေတာ့ MouseDown, MouseMove and MouseUp တို႔ပဲ ျဖစ္ပါတရ္။ MouseDown Event ထဲမွာေတာ့ PictureBox ေပၚသို႔ Left_Click ျဖင့္ Mouse Point ခ် Down/Click ေပးလိုက္တဲ့အခ်ိန္မွာ လုပ္ေစခ်င္တဲ့ အလုပ္ေတြကို ခိုင္းေစႏိုင္ပါတရ္။ MouseMove Event ကေတာ့ Left_Clik ေပးၿပီး Drag ဆြဲတဲ့အခ်ိန္မွာ လုပ္ေစခ်င္တဲ့ အလုပ္ေတြကို ခိုင္းဖို႔ပါ။ MouseUp မွာေတာ့ Mouse Down and Move အလုပ္ ႏွစ္ခုလုပ္ၿပီး ျပန္လႊတ္လိုက္တဲ့အခ်ိန္မွာ လုပ္ေစခ်င္တဲ့ အလုပ္ေတြကို ခိုင္းေစႏိုင္ပါတရ္။ ဒီေန႔ ေလ့က်င့္ခန္းမွာေတာ့ Event သံုးခုလံုးၿပီးမွ Processing တစ္ခု လုပ္တဲ့ပံုစံနဲ႔ ခ်ဥ္းကပ္ထားပါတရ္။

Event တစ္ခုခ်င္းစီထဲက Code ကို အေသးစိတ္ေလ့လာၾကည့္ၾကရေအာင္...။ picOriginalImg ရဲ႕ MouseDown_Event ထဲသို႔ ၀င္၍ ေအာက္ပါ Coding ကိုေရးယူလုိက္ပါဗ်ာ။

int x, y, cropWidth, cropHeight;
private void picOriginalImg_MouseDown(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left) {
       x = e.X;
       y = e.Y;
       Cursor = Cursors.Cross;
    }
}

Method ရဲ႕ အျပင္ဘက္မွာ Global Variable အျဖစ္ x, y, cropWidth, cropHeight ဆိုၿပီး ေလးခုေၾကျငာထားပါတရ္။ ၄င္း variable ေတြကို ဒီ Event တစ္ခုတည္းကတင္ မဟုတ္ဘဲ အျခားေသာ Event ေတြကပါ ေခၚသံုးႏိုင္ေအာင္လို႔ Global ေၾကျငာထားျခင္းျဖစ္ပါတရ္။ MouseDown_Event ထဲမွာ ခိုင္းထားတဲ့အလုပ္ကေတာ့ ရိုးရွင္းပါတရ္။ စစခ်င္းမွာ if()Statement နဲ႔ Mouse ရဲ႕ Event(Action)ကိုဖမ္းၿပီး Left Click ျဖစ္လား/မျဖစ္လားဆိုၿပီး စစ္ထားပါတရ္။ Left_Click Action ျဖစ္ခဲ့ရင္ေတာ့ က်ေနာ္တို႔ Global ေၾကျငာထားေသာ x, y variable ထဲကို မိတ္ေဆြကို Mouse Down/Click ေပးလိုက္ေသာ X,Y Coordinate ကို လွမ္းထည့္လိုက္ပါတရ္။ ဆိုလိုတာကေတာ့ မိတ္ေဆြတို႔ Crop ရဲ႕ Image ဟာ ဒီ X, Y Coordinate က စပါ့မရ္လို႔ မွတ္ထားခိုင္းလိုက္တာပဲျဖစ္ပါတရ္။ ကာဆာကို Cross သံုးထားတာကေတာ့ Mouse Down and Drag လုပ္ေနတဲ့အခ်ိန္မွာ ကာဆာကို Cross ပံုစံေလး ျပေနေစခ်င္တဲ့အတြက္ေၾကာင့္ပါ။ ဒီေလာက္ဆိုရင္ေတာ့ MouseDown_Event မွာ ခိုင္းေစထားတဲ့အခ်ိန္ေတြကို သိၿပီလို႔ ထင္ပါတရ္ဗ်ာ။

picOriginalImg ရဲ႕ MouseMove_Event ထဲသို႔၀င္ၿပီး ေအာက္ပါ Coding ကိုထပ္ေရးယူလိုက္ပါဗ်ာ။

private void picOriginalImg_MouseMove(object sender, MouseEventArgs e)
{
    if (picOriginalImg.Image != null) {
      if (e.Button == MouseButtons.Left) {
         cropWidth = e.X - x;
         cropHeight = e.Y - y;
         picOriginalImg.Refresh();
         picOriginalImg.CreateGraphics().DrawRectangle(Pens.Gold, x, y, cropWidth, cropHeight);
      }
   }
}

ဒီမွာလည္း ခက္ခဲတာ ဘာမွမပါ ပါဘူးဗ်ာ။ Coding စစခ်င္းမွာ က်ေနာ္တို႔ Crop လုပ္ခ်င္တဲ့ PictureBox ထဲမွာ Image Load ဆြဲတင္ၿပီး သားရွိ/မရွိကို အရင္စစ္ထားပါတရ္။ မရွိရင္ေတာ့ MouseMove_Event အလုပ္လုပ္မွာမဟုတ္ပါဘူး။ ရွိခဲ့ရင္ေတာ့ ဒုတိယ if()statement နဲ႔ Mouse ရဲ႕ Action ကိုဖမ္းၿပီး Left-Click ဖိၿပီး Drag(Move) လုပ္တာ ဟုတ္/မဟုတ္ ထပ္စစ္ထားပါတရ္။ ဟုတ္ခဲ့ရင္ေတာ့ ဘရ္ေလာက္ Width, ဘရ္ေလာက္ Height ေလာက္ထိ Crop လုပ္မရ္ဆုိတဲ့ မိတ္ေဆြတို႔ Drag ဆြဲသြားေသာ Width နဲ႔ Height ကိုမွတ္ပါတရ္။ ရလာတဲ့ တန္ဖိုးေတြကိုေတာ့ အေပၚမွာ global ေၾကျငာခဲ့တဲ့ cropWidth နဲ႔ cropHeight ထဲကို သြားသိမ္းထားပါတရ္။ ဒီမွာ ေနာက္ဆံုး MouseMove ရဲ႕ ဆံုးမွတ္ျဖစ္တဲ့ X,Y Coordinate ေတြထဲက စမွတ္(X,Y coordinate) (e.X - x နဲ႔ e.Y - y) ကိုျပန္ႏုတ္ထားတာကေတာ့ မိတ္ေဆြတို႔ Drag ဆြဲယူလိုက္တဲ့ Width and Height ကို အတိအက်လိုခ်င္လို႔ပါ။ နားမလည္ခဲ့ရင္ေတာ့ X,Y Coordinate မ်ဥ္းဆြဲၿပီး Trace လုပ္ၾကည့္ႏိုင္ပါတရ္။ ဒီ crop Image ရဲ႕ Widht and Height ဖမ္းႏိုင္တဲ့အဆင့္နဲ႔တင္ တကယ္ဆိုရင္ MouseMove_Event ရဲ႕ အလုပ္က ၿပီးပါတရ္။ ဒါကိုမွကြန္႔ၿပီး Selected Area ကို ထင္သာျမင္သာရွိေအာင္ Rectangle ေလးဆြဲၿပီး ျပေစခ်င္လို႔သာ ေအာက္က ႏွစ္ေၾကာင္းက ထပ္ေရးရတာ ျဖစ္ပါတရ္။ ေအာက္က ႏွစ္ေၾကာင္းမပါလည္း အလုပ္ျဖစ္ပါတရ္။

Rectangle ဆြဲဖို႔အတြက္ DrawRectangle() Method ကိုသံုးထားပါတရ္။ Parameter ငါးခုပါၿပီး ပထမ parameter ကေတာ့ Rectangle ကိုဆြဲခ်င္တဲ့ Pen Class ပါ။ ဒီမွာေတာ့ Pen ရဲ႕ Color ကို Assign လုပ္ေပးထားပါတရ္။ မိတ္ေဆြတို႔အေနနဲ႔ေတာ့ ႏွစ္သက္သလို အျခား properties ေတြကို ထည့္သြင္းအသံုးျပဳႏုိင္ပါတရ္။ ေနာက္ x,y Paramenter ႏွစ္ခုကေတာ့ Rectangle ရဲ႕ စမွတ္ Coordinate အမွတ္ျဖစ္ပါတရ္။ ေနာက္ဆံုး Parameter ႏွစ္ခုကေတာ့ ဆြဲယူမရ္႕ Rectangle ရဲ႕ Width and Height ကို သတ္မွတ္ေပးလိုက္တာပါ။ ဒီမွာ က်ေနာ္ Graphic လုပ္ငန္းစဥ္ကို ႏွစ္ေၾကာင္းကိုတစ္ေၾကာင္းတည္းျဖစ္ေအာင္ ေပါင္းေရးထားတာပါ။ နားလည္ရ ခက္သြားမရ္ဆိုရင္ေတာ့ ...

Graphics gfx = picOriginalImg.CreateGraphics();
gfx.DrawRectangle(Pens.Gold, x, y, cropWidth, cropHeight);

အခုလိုပံုစံ ခြဲေရးလို႔ရႏိုင္ပါတရ္။ ပထမ တစ္ေၾကာင္းက Graphic ဆြဲယူမရ္႕ Container ကိုသတ္မွတ္ေပးတာပါ။ က်ေနာ္တို႔က picOriginalImg အေပၚမွာဆြဲမွာျဖစ္လို႔ ၄င္း PictureBox ကိုညႊန္းေပးထားတာပဲျဖစ္ပါတရ္။ ဒုတိယ တစ္ေၾကာင္းကေတာ့ သတ္မွတ္ထားတဲ့ Container ေပၚမွာ DrawRectangle()Method ကိုအသံုးျပဳၿပီး Rectangle Graphic တစ္ခုဆြဲယူလိုက္တာပဲျဖစ္ပါတရ္။ နားလည္ၾကမရ္လို႔ ထင္ပါတရ္။ မိတ္ေဆြတို႔အေနနဲ႔ေတာ့ ႏွစ္ေၾကာင္းတစ္ေၾကာင္းေပါင္းၿပီးျဖစ္ေစ၊ ႏွစ္ေၾကာင္းခြဲေရးၿပီးျဖစ္ေစ မိမိအားသာရာကို အသံုးျပဳႏိုင္ပါတရ္။

picOriginalImg.Refresh();

PictureBox ကို အၿမဲ Refresh ေပးထားတာကေတာ့ MouseMove Event အတြင္း ေရႊ႕သြားေသာ Pixel အတိုင္း ဆြဲယူသြားေသာ Rectangle ေတြကို ျပန္ ျပန္ဖ်တ္ထုတ္ခ်င္လို႔ပါ။ မိတ္ေဆြကို သေဘာတရားကို နားလည္ေစခ်င္ရင္ေတာ့ ၄င္း cmd line ကို off ၿပီး run ၾကည့္ႏိုင္ပါတရ္။

ေနာက္ဆံုး Event တစ္ခုျဖစ္တဲ့ MouseUp_Event ကိုဆက္ေလ့လာၾကည့္မရ္။ ဒါေၾကာင့္ picOriginalImg ရဲ႕ MouseUp Event ထဲသို႔၀င္၍ ေအာက္ပါ Coding ေလးကို ၀င္ေရးယူလိုက္ပါဗ်ာ။

private void picOriginalImg_MouseUp(object sender, MouseEventArgs e)
{
    Cursor = Cursors.Default;           
    if (cropWidth > 1) {
       Bitmap oriBmp = new Bitmap(picOriginalImg.Image, picOriginalImg.Width, picOriginalImg.Height);

       Bitmap cropBmp = new Bitmap(cropWidth, cropHeight);
       using (Graphics gfx = Graphics.FromImage(cropBmp)){
           Rectangle ret = new Rectangle(x, y, cropWidth, cropHeight);
           gfx.DrawImage(oriBmp, 0, 0, ret, GraphicsUnit.Pixel);
       }
       picResultImg.Image = cropBmp;
    }            
}

Coding စစခ်င္းမွာ crop Area သတ္မွတ္ေနတဲ့အခ်ိန္ Cross ေပးထားေသာ ကာဆာကို မူလပံုစံျဖစ္တဲ့(မွ်ားေခါင္းပံု) Default ျပန္ေပးလိုက္ပါတရ္။ if()statemet ကေတာ့ crop Area ရွိ/မရွိ စစ္ထားတာပါ။ မိတ္ေဆြတို႔ crop လုပ္မရ္႕ Area ဟာ 1 pixel ထက္နည္းေနရင္ အလုပ္လုပ္မွာ မဟုတ္ပါဘူးဗ်ာ။ ေနာက္တစ္ေၾကာင္းကေတာ့ Crop မလုပ္ရေသးတဲ့ Original Image ကို Bitmap အျဖစ္ Clone ပြားယူလိုက္တာပဲျဖစ္ပါတရ္။ ေနာက္တစ္ေၾကာင္းကေတာ့ Crop လုပ္ယူလိုက္တဲ့ Image ကို သိုေလွာင္ဖို႔အတြက္ Bitmap အသစ္တစ္ခု တည္ေဆာက္လိုက္တာပါ။ ၿပီးရင္ေတာ့ ၄င္း Bitmap ကို Container အျဖစ္ထားၿပီး Graphic ဆြဲယူပါ့မရ္လို႔ ခိုင္းပါတရ္။ ဒီမွာေတာ့ DrawImage() Method ကိုသံုးထားပါတရ္။ Parameter ငါးခု passing လုပ္ထားပါတရ္။ ပထမ parameter ကေတာ့ Soucre Image သို႔မဟုတ္ Original Image ပါ။ ေနာက္ parameter ႏွစ္ခုကေတာ့ စမွတ္(X,Y coordinate) သတ္မွတ္ေပးတာပါ။ ေနာက္ parameter ကေတာ့ Selected area ပါ။ Rectangle ကိုသံုးထားပါတရ္။ ေနာက္ဆံုး parameter ကေတာ့ Graphics ရဲ႕ Unit ကို သတ္မွတ္ေပးတာပဲျဖစ္ပါတရ္။ က်ေနာ္ကေတာ့ Pixel ကိုေရြးေပးထားပါတရ္။ မိတ္ေဆြတို႔အေနနဲ႔ေတာ့ လက္မ၊ မီလီမီတာ၊ point စတဲ့ ႏွစ္သက္ရာ Unit တစ္ခုခုနဲ႔ ေျပာင္းလဲအသံုးျပဳႏိုင္ပါတရ္။ အႏွစ္ခ်ဳပ္ခိုင္းသြားတဲ့ သေဘာကိုေျပာရရင္ Original ထဲက Select လုပ္ထားေသာ Area ကို Pixel Unit ကိုအသံုးျပဳၿပီး cropBmp ထဲသို႔ စမွတ္(0,0 Coordinate) မွ Graphic ဖန္တီးေပးပါလို႔ ခိုင္းလိုက္တာပါ။ ေနာက္ဆံုးရလာတဲ့ cropBmp သို႔မဟုတ္ Crop Image ကိုေတာ့ Preview အျဖစ္ picResultImg PictureBox ေပၚသို႔ ဆြဲတင္ေပးလိုက္တာပဲ ျဖစ္ပါတရ္ဗ်ာ။ နားလည္ႏိုင္ၾကလိမ့္မရ္လို႔ ေမွ်ာ္လင့္ပါတရ္။

Coding တစ္ေၾကာင္းခ်င္းစီကိုေတာ့ အေသးစိတ္ ရွင္းျပခဲ့ပါတရ္။ ပိုၿပီး နားလည္ေစခ်င္တရ္ ဆိုရင္ေတာ့ Coding အျပည့္အစံုကို ေအာက္မွာ ေလ့လာၾကည့္ႏိုင္ပါတရ္ဗ်။

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

namespace ImgProcessing
{
    public partial class frmCropImage : Form
    {
        public frmCropImage()
        {
            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(picResultImg.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;
                }
            }
        }

        int x, y, cropWidth, cropHeight;
        private void picOriginalImg_MouseDown(object sender, MouseEventArgs e)
        {
            if (e.Button == MouseButtons.Left) {
                x = e.X;
                y = e.Y;
                Cursor = Cursors.Cross;
            }
        }

        private void picOriginalImg_MouseMove(object sender, MouseEventArgs e)
        {
            if (picOriginalImg.Image != null) {
                if (e.Button == MouseButtons.Left) {
                    cropWidth = e.X - x;
                    cropHeight = e.Y - y;
                    picOriginalImg.Refresh();
                    picOriginalImg.CreateGraphics().DrawRectangle(Pens.Gold, x, y, cropWidth, cropHeight);
                }
            }
        }

        private void picOriginalImg_MouseUp(object sender, MouseEventArgs e)
        {
            Cursor = Cursors.Default;           
            if (cropWidth > 1) {
                Bitmap oriBmp = new Bitmap(picOriginalImg.Image, picOriginalImg.Width, picOriginalImg.Height);

                Bitmap cropBmp = new Bitmap(cropWidth, cropHeight);
                using (Graphics gfx = Graphics.FromImage(cropBmp)) {
                    Rectangle ret = new Rectangle(x, y, cropWidth, cropHeight);
                    gfx.DrawImage(oriBmp, 0, 0, ret, GraphicsUnit.Pixel);
                }
                picResultImg.Image = cropBmp;
            }            
        }     
    }
}

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