家豪教學網工科賽程式設計教學 113 年第六題

參考題型範例 - 全國高級中等學校技藝競賽平台工業類
題目：影像處理之邊緣偵測實作
問題描述
在影像處理中，邊緣偵測是基礎且重要的關鍵技術。其有助於提取影像中的形狀或物體輪廓特徵，因而被廣泛用於自動駕駛、工業瑕疵檢測、醫學影像分析等領域。Sobel 是常見的邊緣偵測技術之一，其演算法如下:

輸入一張彩色影像(RGB Ⅰmage)，其大小為高度 $(H)\times$寬度$(W)\times 3$。每個像素由紅色($R$)、綠色($G$)、藍色($B$)三種顏色組成，每種顏色分別用 8 位元表示。
將彩色影像轉換為灰階影像(GrayImage) ，這是許多影像處理技術的基礎步驟。使用如下的轉換公式：

$Gray(x,y)=0.3\times R(x,y)+0.59\times G(x,y)+0.11\times B(x,y)$

$(1)$

利用 Sobel 邊緣偵測方法對灰階影像進行處理。使用水平及垂直 Sobel 運算子進行卷積操作，計算水平和垂直邊緣的梯度。其中，水平($x$)方向梯度 $G_x$ 如方程式(2)所示。

$ G_x=\begin{bmatrix} -1 & 0 & 1\\ -2 & 0 & 2\\ -1 & 0 & 1\end{bmatrix}\ast Gray $

$(2)$

$ G_x=\begin{bmatrix} -1 & -2 & -1\\ 0 & 0 & 0\\ 1 & 2 & 1\end{bmatrix}\ast Gray $

$(3)$

輸入影像

$\ast$

卷積核

$=$

輸出影像

$y_{11}=(1\times a_{11})+(2\times a_{12})+(3\times a_{13})+$ $(4\times a_{21})+(5\times a_{22})+(6\times a_{23})+$ $(7\times a_{31})+(8\times a_{32})+(9\times a_{33})$	$y_{12}=(2\times a_{11})+(3\times a_{12})+(6\times a_{13})+$ $(5\times a_{21})+(6\times a_{22})+(8\times a_{23})+$ $(8\times a_{31})+(2\times a_{32})+(1\times a_{33})$
$y_{21}=(4\times a_{11})+(5\times a_{12})+(6\times a_{13})+$ $(7\times a_{21})+(8\times a_{22})+(2\times a_{23})+$ $(5\times a_{31})+(6\times a_{32})+(8\times a_{33})$	$y_{22}=(5\times a_{11})+(6\times a_{12})+(8\times a_{13})+$ $(8\times a_{21})+(2\times a_{22})+(1\times a_{23})+$ $(6\times a_{31})+(8\times a_{32})+(2\times a_{33})$
圖一、卷積操作

在獲得與後，藉由方程式(4)可進一步計算得出最終邊緣偵測結果：

$G=\sqrt{G_x^2+G_y^2}$

程式功能：

使用者能選取要輸入的影像圖檔，可選擇包括(jpg，png，bmp，tif等)。
使用者能點選功能按鈕，將輸入的彩色影像轉換為灰階影像。
使用者能點選功能按鈕，將輸入的彩色影像轉換為邊緣偵測後的影像。
使用者能依照自己的需求自由命名檔案及選擇格式(jpg, png, bmp, tif)，並儲存當前輸出結果，包括灰階影像與邊緣偵測後的影像。

程式執行範例：

當程式執行時，會出現圖形使用者介面，如圖二所示。使用者可點選讀取影像按來選擇輸入影像。

圖二、讀取影像示意圖

當使用者開啟彩色影像檔後，程式會自動顯示，如圖三所示。

(a)

(b)

圖三、賣取影像結果示意圖：(a)範例一; (b)範例二

當使用者點選灰階轉換功能按鈕時，彩色影像將轉換成灰階影像，並顯示於右側，如圖四所示。

(a)

(b)

圖四、灰階轉換結果示意圖: (a)範例一; (b)範例二

當使用者點選邊緣偵測按鈕功能時，彩色影像將轉換成邊緣偵測後的影像，並顯示於右側，如圖五所示。

(a)

(b)

圖五、邊緣偵測結果示意圖: (a)範例一; (b)範例二

使用者在操作動作 3 及動作 4 後，可依照需求，點選儲存按鈕，儲存當前轉換後的影像(灰階或邊緣影像)，其可自由地命名及儲存不同影像格式(jpg, png, tif, bmp)，如圖六所示。

(a)

(b)

圖六、儲存影像示意圖: (a)範例一; (b)範例二

程式碼下載

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

namespace _113_QQ6
{
    public partial class Form1 : Form
    {
        private Bitmap originalImage;
        private Bitmap processedImage;

        public Form1()
        {
            InitializeComponent();
        }

        private void readImgBtn_Click(object sender, EventArgs e) //讀取圖檔
        {
            using (OpenFileDialog openFileDialog = new OpenFileDialog())
            {
                openFileDialog.Filter = "Image Files|*.jpg;*.png;*.tif;*.bmp"; //內定檔案格式
                openFileDialog.InitialDirectory = Directory.GetParent(Application.StartupPath).Parent.Parent.Parent.Parent.FullName; // 將初始路徑設為專案資料夾
                if (openFileDialog.ShowDialog() == DialogResult.OK)
                {
                    originalImage = new Bitmap(openFileDialog.FileName);
                    imageSource.Image = originalImage;
                    processedImage = null;
                    imageTarget.Image = null;
                }
            }
        }

        private void writeImgBtn_Click(object sender, EventArgs e) //儲存圖檔按鈕
        {
            if (processedImage == null) //未處理圖檔
            {
                MessageBox.Show("請先處理影像後再儲存！");
                return;
            }

            using (SaveFileDialog saveFileDialog = new SaveFileDialog())
            {
                saveFileDialog.Filter = "JPG Image|*.jpg|PNG Image|*.png|BMP Image|*.bmp|TIF Image|*.tif";
                saveFileDialog.DefaultExt = "png";
                saveFileDialog.InitialDirectory = Directory.GetParent(Application.StartupPath).Parent.Parent.Parent.Parent.FullName; //將初始路徑設為專案根目錄
                if (saveFileDialog.ShowDialog() == DialogResult.OK)
                {
                    ImageFormat format = GetImageFormat(Path.GetExtension(saveFileDialog.FileName));
                    processedImage.Save(saveFileDialog.FileName, format);
                }
            }
        }

        private ImageFormat GetImageFormat(string extension)
        {
            return extension.ToLower() switch
            {
                ".jpg" => ImageFormat.Jpeg,
                ".png" => ImageFormat.Png,
                ".bmp" => ImageFormat.Bmp,
                ".tif" => ImageFormat.Tiff,
                _ => ImageFormat.Png,
            };
        }

        private void button3_Click(object sender, EventArgs e) // 灰階轉換按鈕
        {
            if (originalImage == null)
            {
                MessageBox.Show("請先讀取影像！");
                return;
            }
            processedImage = GrayscaleConversion(originalImage);
            imageTarget.Image = processedImage;
        }

        private void button4_Click(object sender, EventArgs e) //邊緣偵測按鈕
        {
            if (originalImage == null)
            {
                MessageBox.Show("請先讀取影像！");
                return;
            }
            processedImage = EdgeDetection(originalImage);
            imageTarget.Image = processedImage;
        }

        private Bitmap GrayscaleConversion(Bitmap source) //灰階轉換
        {
            Bitmap grayImage = new Bitmap(source.Width, source.Height);
            for (int y = 0; y < source.Height; y++)
            {
                for (int x = 0; x < source.Width; x++)
                {
                    Color pixel = source.GetPixel(x, y);
                    int grayValue = (int)(pixel.R * 0.3 + pixel.G * 0.59 + pixel.B * 0.11);
                    grayImage.SetPixel(x, y, Color.FromArgb(grayValue, grayValue, grayValue));
                }
            }
            return grayImage;
        }

        private Bitmap EdgeDetection(Bitmap source) //邊緣偵測
        {
            Bitmap grayImage = GrayscaleConversion(source);
            Bitmap edgeImage = new Bitmap(source.Width, source.Height);
            int[,] gx = { { -1, 0, 1 }, { -2, 0, 2 }, { -1, 0, 1 } };
            int[,] gy = { { -1, -2, -1 }, { 0, 0, 0 }, { 1, 2, 1 } };
            for (int y = 1; y < source.Height - 1; y++)
            {
                for (int x = 1; x < source.Width - 1; x++)
                {
                    int gradientX = 0, gradientY = 0;
                    for (int i = -1; i <= 1; i++)
                    {
                        for (int j = -1; j <= 1; j++)
                        {
                            Color pixel = grayImage.GetPixel(x + j, y + i);
                            int gray = pixel.R;
                            gradientX += gray * gx[i + 1, j + 1];
                            gradientY += gray * gy[i + 1, j + 1];
                        }
                    }
                    int gradient = (int)Math.Sqrt(gradientX * gradientX + gradientY * gradientY);
                    gradient = Math.Clamp(gradient, 0, 255);
                    edgeImage.SetPixel(x, y, Color.FromArgb(gradient, gradient, gradient));
                }
            }
            return edgeImage;
        }
    }
}