Implémentation de la détection des contours avec Python et OpenCV : un guide étape par étape-Tutoriel Python-php.cn

Implémentation de la détection des contours avec Python et OpenCV : un guide étape par étape

DDD

Libérer： 2024-10-20 06:10:02

original

876 Les gens l'ont consulté

Introduction

La détection des contours est fondamentale en vision par ordinateur, car elle nous permet d'identifier les limites des objets dans les images. Dans ce didacticiel, nous allons implémenter la détection des contours à l'aide de l'opérateur Sobel et du détecteur de contours Canny avec Python et OpenCV. Nous créerons ensuite une application Web simple à l'aide de Flask, stylisée avec Bootstrap, pour permettre aux utilisateurs de télécharger des images et de visualiser les résultats.

LIEN DE DÉMO : Démo de détection de bord

Conditions préalables

Python 3.x installé sur votre machine.
Connaissance de base de la programmation Python.
La connaissance du HTML et du CSS est utile mais pas obligatoire.

Configuration de l'environnement

1. Installer les bibliothèques requises

Ouvrez votre terminal ou votre invite de commande et exécutez :

pip install opencv-python numpy Flask

Copier après la connexion

2. Créez le répertoire du projet

mkdir edge_detection_app
cd edge_detection_app

Copier après la connexion

Implémentation de la détection des contours

1. L'opérateur Sobel

L'opérateur Sobel calcule le gradient d'intensité de l'image en mettant l'accent sur les bords.

Mise en œuvre du code :

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

Copier après la connexion

2. Le détecteur Canny Edge

Le détecteur de bords Canny est un algorithme à plusieurs étapes pour détecter les bords.

Mise en œuvre du code :

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

Copier après la connexion

Création d'une application Web Flask

1. Configurer l'application Flask

Créez un fichier nommé 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)

Copier après la connexion

2. Définir des itinéraires

Télécharger l'itinéraire :

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

Copier après la connexion

Fonction d'image de traitement :

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)

Copier après la connexion

Parcours des résultats :

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

Copier après la connexion

3. Exécutez l'application

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

Copier après la connexion

Styliser l'application Web avec Bootstrap

Incluez Bootstrap CDN dans vos modèles HTML pour le style.

1. télécharger.html

Créez un répertoire de modèles et ajoutez upload.html :

<!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>

Copier après la connexion

2. résultat.html

Créez result.html dans le répertoire des modèles :

<!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>

Copier après la connexion

Exécuter et tester l'application

1. Exécutez l'application Flask

python app.py

Copier après la connexion

2. Accédez à l'application

Ouvrez votre navigateur Web et accédez à http://localhost:5000.

Téléchargez une image et cliquez sur Télécharger et traiter.
Affichez les résultats de la détection des contours.

EXEMPLE DE RÉSULTAT

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

Conclusion

Nous avons créé une application Web simple qui effectue la détection des contours à l'aide de l'opérateur Sobel et du détecteur de contours Canny. En intégrant Python, OpenCV, Flask et Bootstrap, nous avons créé un outil interactif qui permet aux utilisateurs de télécharger des images et d'afficher les résultats de détection des contours.

Prochaines étapes

Améliorez l'application : ajoutez plus d'options de détection de contour ou autorisez les ajustements des paramètres.
Améliorez l'interface utilisateur : intégrez davantage de composants Bootstrap pour une meilleure expérience utilisateur.
Explorez plus loin : déployez l'application sur d'autres plates-formes comme Heroku ou AWS.

Référentiel GitHub : application de détection de contours

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!