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
Nach dem Login kopieren
2. Erstellen Sie das Projektverzeichnis
mkdir edge_detection_app
cd edge_detection_app
Nach dem Login kopieren
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
Nach dem Login kopieren
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)
Nach dem Login kopieren
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)
Nach dem Login kopieren
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')
Nach dem Login kopieren
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)
Nach dem Login kopieren
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)
Nach dem Login kopieren
3. Führen Sie die App aus
if __name__ == '__main__':
app.run(debug=True)
Nach dem Login kopieren
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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
Ausführen und Testen der Anwendung
1. Führen Sie die Flask-App aus
python app.py
Nach dem Login kopieren
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
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!
