C# - Easy Way Re-size Image using DrawImage() Graphic

Posted by ေတဇာလင္း Saturday, 4 February 2017 0 comments

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

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

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

DrawImage() Method ကို အသံုးျပဳမရ္ဆိုရင္ေတာ့ System.Drawin; နဲ႔ System.Drawing.Imaging; ဆိုတဲ့ Library ႏွစ္ခုကိုေတာ့ မျဖစ္မေန ေၾကျငာေပးရပါ့မရ္။ DrawImage()Method မွာ အသံုးျပဳႏိုင္တဲ့ Function Overload ပံုစံေတြ အမ်ားႀကီးပါ။ ဒီအမ်ားႀကီးထဲကမွ Image တစ္ခုကို မိမိႏွစ္သက္ရာ Width, Height အတိုင္း Graphic ျပန္ဆြဲႏိုင္မရ္႕ အလြရ္ကူဆံုး နည္းလမ္းေလးတစ္ခုကို ေလ့လာၾကည့္မရ္။ ဒါကေတာ့...

DrawImage(Image image, int x, int y, int width, int height);

အခုလို ပံုစံပါ။ Parameter Passing ငါးခုေတြ႔ရပါလိမ့္မရ္။ ပထမ parameter ကေတာ့ Source Image ပါ။ ဒီေနရာမွာ မိမိ Re-size လုပ္ခ်င္ေသာ Image ကိုေရြးခ်ယ္ေပးရပါ့မရ္။ ဒုတိယ parameter ကေတာ့ Drawing Object အတြက္ စမွတ္(x coordinate of the upper-left corner)ျဖစ္ပါတရ္။ တတိယ parameter ကေတာ့ Drawing Object ရဲ႕ စမွတ္(y-coordinate of the upper-left corner)ပဲျဖစ္ပါတရ္။ ဆိုလိုတဲ့သေဘာကေတာ့ Drawing Objecte ကို ဒုတိယနဲ႔တတိယ parameter ျဖစ္တဲ့ x, y Coordinate ကေန စဆြဲပါလို႔ သတ္မွတ္လို္က္တာပါ။ စမွတ္ေတာ့ရၿပီ ဘရ္ေလာက္အက်ယ္၊ ဘရ္ေလာက္အျမင့္ ဆြဲယူမွာလည္းဆိုတာကို သတ္မွတ္ေပးဖို႔ လိုပါေသးတရ္။ ဒါေၾကာင့္ ေနာက္ဆံုး parameter ႏွစ္ခုမွာ Drawing Object ရဲ႕ Width နဲ႔ Height ကို သတ္မွတ္ေပးလိုက္တာပဲျဖစ္ပါတရ္။ ဒီေလာက္ဆိုရင္ေတာ့ မိတ္ေဆြတို႔အေနန႔ဲ က်ေနာ္တုိ႔အသံုးျပဳမရ္႕ DrawImage()Method ရဲ႕ အလုပ္လုပ္ပံုကို နားလည္ၾကၿပီလို႔ ထင္ပါတရ္။

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

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

DrawImage()Method ရဲ႕ အလုပ္လုပ္ပံုကိုလည္းသိၿပီ၊ GUI လည္းတည္ေဆာက္ၿပီးၿပီဆိုရင္ေတာ့ က်ေနာ္တုိ႔ ဘရ္လို Re-size လုပ္ႏိုင္မလဲဆိုတာေလးကို ဆက္ေလ့လာၾကည့္ပါ့မရ္။ ResizeImage()ဆိုတဲ့ Method တစ္ခုတည္ေအာက္ၿပီး ေအာက္ပါ Coding ေလးကို ေရးယူလိုက္ပါဗ်ာ။

public Image ResizeImage(Image inputImg, int width, int height)
{
    //Create Bitmap with Specified width and height
    Bitmap resultImg = new Bitmap(width, height);

    //Specify Container of Bitmap for Drawing Graphic
    using (Graphics gfx = Graphics.FromImage(resultImg)) {
    //Drawing Re-Size Image 
         gfx.DrawImage(inputImg, 0, 0, width, height);
     }
     //Return Image
     return resultImg;
}

အလုပ္လုပ္သြားပံုကေတာ့ ရိုးရိုးရွင္းရွင္းေလးပါပဲ။ Parameter အေနနဲ႔ Source Image ရယ္၊ Re-size Width and Height ကို Passing လုပ္ထားပါတရ္။ Result အေနန႔ဲေတာ့ Source Image ကို သတ္မွတ္ေပးလိုက္ေသာ Width and Height အတိုင္း Processing လုပ္ၿပီး ျပန္လည္ ထုတ္ေပးမွာျဖစ္ပါတရ္။ Coding စစခ်င္းမွာ User သတ္မွတ္လိုက္ေသာ Width and Height အတိုင္း Bitmap Image တစ္ခု ဖန္တီးယူပါတရ္။ ဒုတိယ cmd line မွာေတာ့ Graphic Object တည္ေဆာက္ပါတရ္။ Graphic ရဲ႕ Drawing Area ကိုေတာ့ Bitmap ပါလို႔ သတ္မွတ္ေပးလိုက္ပါတရ္။ ဒီမွာ using Keyword သုံးထားတာကေတာ့ Graphic Object ရဲ႕ scope ကို သတ္မွတ္လိုက္တာပါ။ Scope လြန္ၿပီဆိုတာနဲ႔ Graphic Object ကို Auto Dispose လုပ္ေပးပါတရ္။ using မသံုးခဲ့ဘူးဆိုရင္ေတာ့ Graphic ကို သံုးၿပီးတဲ့အခ်ိန္မွာ Dispose() Method ကိုေခၚၿပီး Graphic လုပ္ငန္းၿပီးဆံုးေၾကာင္း သတ္မွတ္ေပးရပါတရ္။ တတိယ cmd line ကေတာ့ က်ေနာ္တို႔ သတ္မွတ္ထားတဲ့ Graphic Area ထဲမွာ DrawImage() Method ကိုအသံုးျပဳၿပီး Graphic တစ္ခု ဆြဲယူလိုက္တာပဲျဖစ္ပါတရ္ဗ်ာ (ရွင္းလင္းခ်က္ အေပၚမွာၾကည့္ပါ)။ ေနာက္ဆံုး cmd line ကေတာ့ က်ေနာ္တို႔ လုပ္ေနၾကအတုိင္း Image ကို Return ျပန္ေပးတာပဲျဖစ္ပါတရ္။ Image အေနနဲ႔ Return ျပန္ေပးတာျဖစ္တဲ့အတြက္ Calling Method က Image အေနနဲ႔ ျပန္ဖမ္းရမရ္ဆိုတာေတာ့ သတိထားရမွာျဖစ္ပါတရ္။ Result ကုိေတာ့ ေအာက္မွာ ၾကည့္လိုက္ပါဗ်ာ။

ဒီမွာေတာ့ က်ေနာ္ Re-size Image ကို Runtime မွာ ၾကည့္ခ်င္တဲ့အတြက္ က်ေနာ္တို႔ Result PictureBox ကို PanelBox ထဲမွာ ထည့္ထားတာပဲျဖစ္ပါတရ္ဗ်ာ။ Panel ကို AutoScroll = True ေပးထားတာကေတာ့ က်ေနာ္တို႔ Result PictureBox ဘရ္ေလာက္ပဲ Size ႀကီးႀကီး PanelBox ရဲ႕ Width and Height အထဲမွာပဲ ေဖာ္ျပေစၿပီး Scroll ဆြဲၾကည့္ႏိုင္ေအာင္ပါ။ နားလည္ၾကမရ္လို႔ ေမ်ာ္လင့္ပါတရ္ဗ်။

ဆက္လက္ၿပီး Calling Method ကို ေလ့လာၾကည့္ပါ့မရ္။ btnProcessing Button ကို D_Click ေပးၿပီး ေအာက္ပါ Coding ကို ေရးယူလိုက္ပါဗ်ာ။

private void btnProcessing_Click(object sender, EventArgs e)
{
    //Get re-size Image's width and height
    int width = int.Parse(txtImgWidth.Text);
    int height =int.Parse(txtImgHeight.Text);

    //Assign width and height of Output PictureBox
    picResultImg.Width = width;
    picResultImg.Height = height;

    //Call ResizeImage() Method
    picResultImg.Image = ResizeImage(picOriginalImg.Image, width, height);

    //Display re-size width and height of OutputImage
    lblOutputImgResolution.Text = picResultImg.Width + "x" + picResultImg.Height + "-pixel";
}

အနည္းငရ္ ရွင္းျပပါ့မရ္။ စစခ်င္းမွာ TextBox ေတြက ရိုက္ထည့္လာတဲ့ ကိန္းဂဏန္းေတြကို int အျဖစ္ဖမ္းပါတရ္။ ဘာလို႔လည္းဆိုေတာ့ TextBox Input မွန္သမွ်ကို VS C# က Default String အေနနဲ႔ သတ္မွတ္ထားလို႔ပါ။ ေနာက္ Result ထုတ္ျပေပးမရ္႕ PictureBox ရဲ႕ Width and Height ကို User ရိုက္ထည့္လိုက္တဲ့ Width and Height အတိုင္း Assign လုပ္လိုက္ပါတရ္။ ေနာက္တစ္ဆင့္မွာေတာ့ ResizeImage() Method ကုိေခၚၿပီး Image ကုိ Re-size လုပ္ယူပါတရ္။ ၿပီးရင္ေတာ့ PictureBox ေပၚမွာ တခါတည္း ေဖာ္ျပလိုက္တာပဲ ျဖစ္ပါတရ္။ ေနာက္ဆံုးတစ္ေၾကာင္းကေတာ့ က်ေနာ္တို႔ ေျပာင္းလဲယူလိုက္တဲ့ Image Resolution ကို သိႏိုင္ေအာင္ Display ျပထားတာပါ။ Coding ခက္ခက္ခဲခဲေတြ မပါလို႔ နားလည္ၾကလိမ့္မရ္လို႔ ထင္ပါတရ္ဗ်။ Coding အျပည့္အစံုကို ေအာက္မွာ ၀င္ေရာက္ေလ့လာႏိုင္ပါတရ္ဗ်ာ။

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

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

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

            Image inputImg = picOriginalImg.Image;
            lblInputImgResolution.Text = inputImg.Width + "x" + inputImg.Height + "-pixel";
        }

        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;
                }
            }
        }

        private void btnProcessing_Click(object sender, EventArgs e)
        {
            //Get re-size Image's width and height
            int width = int.Parse(txtImgWidth.Text);
            int height =int.Parse(txtImgHeight.Text);

            //Assign width and height of Output PictureBox
            picResultImg.Width = width;
            picResultImg.Height = height;

            //Call ResizeImage() Method
            picResultImg.Image = ResizeImage(picOriginalImg.Image, width, height);

            //Display re-size width and height of OutputImage
            lblOutputImgResolution.Text = picResultImg.Width + "x" + picResultImg.Height + "-pixel";
        }

        public Image ResizeImage(Image inputImg, int width, int height)
        {
            //Create Bitmap with Specified width and height
            Bitmap resultImg = new Bitmap(width, height);

            //Specify Container of Bitmap for Drawing Graphic
            using (Graphics gfx = Graphics.FromImage(resultImg)) {
                //Drawing Re-Size Image 
                gfx.DrawImage(inputImg, 0, 0, width, height);
            }
           
            //Return Image
            return resultImg;
        }
    }
}

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