Heim > Artikel > Backend-Entwicklung > Implementierung der Kantenerkennung mit Python und OpenCV: Eine Schritt-für-Schritt-Anleitung

Implementierung der Kantenerkennung mit Python und OpenCV: Eine Schritt-für-Schritt-Anleitung

DDDOriginal: 2024-10-20 06:10:02877Durchsuche

Einführung

Die Kantenerkennung ist in der Bildverarbeitung von grundlegender Bedeutung und ermöglicht es uns, Objektgrenzen in Bildern zu identifizieren. In diesem Tutorial implementieren wir die Kantenerkennung mithilfe des Sobel-Operators und des Canny-Kantendetektors mit Python und OpenCV. Anschließend erstellen wir mit Flask eine einfache Webanwendung, die mit Bootstrap gestaltet ist, damit Benutzer Bilder hochladen und die Ergebnisse anzeigen können.

DEMO-LINK:Kantenerkennungs-Demo

Voraussetzungen

Python 3.x ist auf Ihrem Computer installiert.
Grundkenntnisse der Python-Programmierung.
Kenntnisse mit HTML und CSS sind hilfreich, aber nicht erforderlich.

Einrichten der Umgebung

1. Installieren Sie die erforderlichen Bibliotheken

Öffnen Sie Ihr Terminal oder Ihre Eingabeaufforderung und führen Sie Folgendes aus:

pip install opencv-python numpy Flask

2. Erstellen Sie das Projektverzeichnis

mkdir edge_detection_app
cd edge_detection_app

Implementierung der Kantenerkennung

1. Der Sobel-Operator

Der Sobel-Operator berechnet den Gradienten der Bildintensität und betont Kanten.

Code-Implementierung:

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. Der Canny Edge Detector

Der Canny-Kantendetektor ist ein mehrstufiger Algorithmus zur Kantenerkennung.

Code-Implementierung:

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

Erstellen einer Flask-Webanwendung

1. Richten Sie die Flask-App ein

Erstellen Sie eine Datei mit dem Namen 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. Routen definieren

Route hochladen:

@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')

Prozessbildfunktion:

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)

Ergebnisroute:

@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)

3. Führen Sie die App aus

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

Gestalten der Webanwendung mit Bootstrap

Fügen Sie Bootstrap CDN zur Gestaltung in Ihre HTML-Vorlagen ein.

1. upload.html

Erstellen Sie ein Vorlagenverzeichnis und fügen Sie upload.html hinzu:

<!DOCTYPE html>
<html lang="en">
<head>
    <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">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-4">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>
</body>
</html>

2. result.html

Erstellen Sie result.html im Vorlagenverzeichnis:

<!DOCTYPE html>
<html lang="en">
<head>
    <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">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-5">Edge Detection Results</h1>
        <div class="row">
            <div class="col-md-6 mb-4">
                <h4 class="text-center">Original Image</h4>
                <img src="{{ url_for('static', filename=original_image) }}" alt="Original Image" class="img-fluid rounded mx-auto d-block">
            </div>
            <div class="col-md-6 mb-4">
                <h4 class="text-center">Sobel X</h4>
                <img src="{{ url_for('static', filename=sobelx_image) }}" alt="Sobel X" class="img-fluid rounded mx-auto d-block">
            </div>
            <div class="col-md-6 mb-4">
                <h4 class="text-center">Canny Edges</h4>
                <img src="{{ url_for('static', filename=edges_image) }}" alt="Canny Edges" class="img-fluid rounded mx-auto d-block">
            </div>
        </div>
        <div class="text-center mt-4">
            <a href="{{ url_for('upload_image') }}" class="btn btn-secondary">Process Another Image</a>
        </div>
    </div>
</body>
</html>

Ausführen und Testen der Anwendung

1. Führen Sie die Flask-App aus

python app.py

2. Greifen Sie auf die Anwendung zu

Öffnen Sie Ihren Webbrowser und navigieren Sie zu http://localhost:5000.

Laden Sie ein Bild hoch und klicken Sie auf Hochladen und verarbeiten.
Sehen Sie sich die Ergebnisse der Kantenerkennung an.

BEISPIELERGEBNIS

Implementing Edge Detection with Python and OpenCV: A Step-by-Step Guide

Abschluss

Wir haben eine einfache Webanwendung erstellt, die die Kantenerkennung mithilfe des Sobel-Operators und des Canny-Kantendetektors durchführt. Durch die Integration von Python, OpenCV, Flask und Bootstrap haben wir ein interaktives Tool erstellt, mit dem Benutzer Bilder hochladen und Kantenerkennungsergebnisse anzeigen können.

Nächste Schritte

Verbessern Sie die Anwendung: Fügen Sie weitere Kantenerkennungsoptionen hinzu oder erlauben Sie Parameteranpassungen.
Verbessern Sie die Benutzeroberfläche: Integrieren Sie mehr Bootstrap-Komponenten für ein besseres Benutzererlebnis.
Weitere Informationen: Stellen Sie die App auf anderen Plattformen wie Heroku oder AWS bereit.

GitHub Repository: Edge-Erkennungs-App

Das obige ist der detaillierte Inhalt vonImplementierung der Kantenerkennung mit Python und OpenCV: Eine Schritt-für-Schritt-Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Python flask css bootstrap html edge Object define for include Directory using operator function this github opencv http ui prompt Access

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie behebt man „ValueError: unbekanntes Gebietsschema: UTF-8“ in Pelican-Quickstart mit Version 3.3?Nächster Artikel：Wie behebt man „ValueError: unbekanntes Gebietsschema: UTF-8“ in Pelican-Quickstart mit Version 3.3?

In Verbindung stehende Artikel

Mehr sehen