使用 Python 和 OpenCV 實現邊緣檢測：逐步指南

介紹

邊緣偵測是電腦視覺的基礎，使我們能夠辨識影像中的物件邊界。在本教程中，我們將使用 Sobel 算子和 Canny 邊緣偵測器以及 Python 和 OpenCV 來實作邊緣偵測。然後，我們將使用 Flask 創建一個簡單的 Web 應用程序，並使用 Bootstrap 進行樣式設計，以允許用戶上傳圖像並查看結果。

示範連結：邊緣偵測示範

先決條件

• 您的電腦上已安裝 Python 3.x。
• Python 程式設計基礎。
• 熟悉 HTML 和 CSS 會有所幫助，但不是必要的。

設定環境

1.安裝所需的庫

開啟終端機或命令提示字元並執行：

pip install opencv-python numpy Flask

2.建立專案目錄

mkdir edge_detection_app
cd edge_detection_app

實施邊緣偵測

1. 索貝爾算子

Sobel 算子計算影像強度的梯度，強調邊緣。

程式碼實作：

import cv2

# Load the image in grayscale
image = cv2.imread('input_image.jpg', cv2.IMREAD_GRAYSCALE)
if image is None:
    print("Error loading image")
    exit()

# Apply Sobel operator
sobelx = cv2.Sobel(image, cv2.CV_64F, 1, 0, ksize=5)  # Horizontal edges
sobely = cv2.Sobel(image, cv2.CV_64F, 0, 1, ksize=5)  # Vertical edges

2. Canny 邊緣偵測器

Canny 邊緣偵測器是一種用於偵測邊緣的多層演算法。

程式碼實作：

# Apply Canny edge detector
edges = cv2.Canny(image, threshold1=100, threshold2=200)

建立 Flask Web 應用程式

1. 設定 Flask 應用程式

建立一個名為app.py的檔案：

from flask import Flask, request, render_template, redirect, url_for
import cv2
import os

app = Flask(__name__)

UPLOAD_FOLDER = 'static/uploads/'
OUTPUT_FOLDER = 'static/outputs/'

app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.config['OUTPUT_FOLDER'] = OUTPUT_FOLDER

# Create directories if they don't exist
os.makedirs(UPLOAD_FOLDER, exist_ok=True)
os.makedirs(OUTPUT_FOLDER, exist_ok=True)

2. 定義路線

上傳路線：

@app.route('/', methods=['GET', 'POST'])
def upload_image():
    if request.method == 'POST':
        file = request.files.get('file')
        if not file or file.filename == '':
            return 'No file selected', 400
        filepath = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
        file.save(filepath)
        process_image(file.filename)
        return redirect(url_for('display_result', filename=file.filename))
    return render_template('upload.html')

處理影像函數：

def process_image(filename):
    image_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
    image = cv2.imread(image_path, cv2.IMREAD_GRAYSCALE)

    # Apply edge detection
    sobelx = cv2.Sobel(image, cv2.CV_64F, 1, 0, ksize=5)
    edges = cv2.Canny(image, 100, 200)

    # Save outputs
    cv2.imwrite(os.path.join(app.config['OUTPUT_FOLDER'], 'sobelx_' + filename), sobelx)
    cv2.imwrite(os.path.join(app.config['OUTPUT_FOLDER'], 'edges_' + filename), edges)

結果路線：

@app.route('/result/<filename>')
def display_result(filename):
    return render_template('result.html',
                           original_image='uploads/' + filename,
                           sobelx_image='outputs/sobelx_' + filename,
                           edges_image='outputs/edges_' + filename)
</filename>

3. 運行應用程式

if __name__ == '__main__':
    app.run(debug=True)

使用 Bootstrap 設計 Web 應用程式的樣式

在 HTML 範本中包含 Bootstrap CDN 以進行樣式設定。

1.上傳.html

建立templates目錄並加入upload.html：

    <meta charset="UTF-8">
    <title>Edge Detection App</title>
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


    <div class="container mt-5">
        <h1 id="Upload-an-Image-for-Edge-Detection">Upload an Image for Edge Detection</h1>
        <div class="row justify-content-center">
            <div class="col-md-6">
                <form method="post" enctype="multipart/form-data" class="border p-4">
                    <div class="form-group">
                        <label for="file">Choose an image:</label>
                        <input type="file" name="file" accept="image/*" required class="form-control-file" id="file">
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">Upload and Process</button>
                </form>
            </div>
        </div>
    </div>

2.結果.html

在templates目錄下建立result.html：

    <meta charset="UTF-8">
    <title>Edge Detection Results</title>
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


    <div class="container mt-5">
        <h1 id="Edge-Detection-Results">Edge Detection Results</h1>
        <div class="row">
            <div class="col-md-6 mb-4">
                <h4 id="Original-Image">Original Image</h4>
                <img src="%7B%7B%20url_for('static',%20filename=original_image)%20%7D%7D" alt="Original Image" class="img-fluid rounded mx-auto d-block">
            </div>
            <div class="col-md-6 mb-4">
                <h4 id="Sobel-X">Sobel X</h4>
                <img src="%7B%7B%20url_for('static',%20filename=sobelx_image)%20%7D%7D" alt="Sobel X" class="img-fluid rounded mx-auto d-block">
            </div>
            <div class="col-md-6 mb-4">
                <h4 id="Canny-Edges">Canny Edges</h4>
                <img src="%7B%7B%20url_for('static',%20filename=edges_image)%20%7D%7D" alt="Canny Edges" class="img-fluid rounded mx-auto d-block">
            </div>
        </div>
        <div class="text-center mt-4">
            <a href="%7B%7B%20url_for('upload_image')%20%7D%7D" class="btn btn-secondary">Process Another Image</a>
        </div>
    </div>

運行和測試應用程式

1. 運行 Flask 應用程式

python app.py

2. 存取應用程式

開啟網頁瀏覽器並導航至 http://localhost:5000。

• 上傳圖像並點擊「上傳並處理」。
• 查看邊緣偵測結果。

結果範例

結論

我們建立了一個簡單的 Web 應用程序，使用 Sobel 算子和 Canny 邊緣偵測器執行邊緣偵測。透過整合 Python、OpenCV、Flask 和 Bootstrap，我們創建了一個互動式工具，讓用戶上傳圖像並查看邊緣檢測結果。

後續步驟

• 增強應用程式：新增更多邊緣偵測選項或允許參數調整。
• 改進UI：融入更多Bootstrap元件，提供更好的使用者體驗。
• 進一步探索：在 Heroku 或 AWS 等其他平台上部署應用程式。

GitHub 儲存庫：邊緣偵測應用程式

以上是使用 Python 和 OpenCV 實現邊緣檢測：逐步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！