Maison > Article > développement back-end > Implémentation de la détection des contours avec Python et OpenCV : un guide étape par étape

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

DDDoriginal: 2024-10-20 06:10:02877parcourir

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

2. Créez le répertoire du projet

mkdir edge_detection_app
cd edge_detection_app

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

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)

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)

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

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)

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)

3. Exécutez l'application

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

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>

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>

Exécuter et tester l'application

1. Exécutez l'application Flask

python app.py

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!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment corriger « ValueError : paramètres régionaux inconnus : UTF-8 » dans Pelican-Quickstart avec la version 3.3 ?Article suivant：Comment corriger « ValueError : paramètres régionaux inconnus : UTF-8 » dans Pelican-Quickstart avec la version 3.3 ?

Articles Liés

Voir plus