Backend Development
Python Tutorial
Implementing Edge Detection with Python and OpenCV: A Step-by-Step Guide
Implementing Edge Detection with Python and OpenCV: A Step-by-Step Guide
Introduction
Edge detection is fundamental in computer vision, allowing us to identify object boundaries within images. In this tutorial, we'll implement edge detection using the Sobel operator and the Canny edge detector with Python and OpenCV. We'll then create a simple web application using Flask, styled with Bootstrap, to allow users to upload images and view the results.
DEMO LINK: Edge Detection Demo
Prerequisites
- Python 3.x installed on your machine.
- Basic knowledge of Python programming.
- Familiarity with HTML and CSS is helpful but not required.
Setting Up the Environment
1. Install Required Libraries
Open your terminal or command prompt and run:
pip install opencv-python numpy Flask
2. Create the Project Directory
mkdir edge_detection_app cd edge_detection_app
Implementing Edge Detection
1. The Sobel Operator
The Sobel operator calculates the gradient of image intensity, emphasizing edges.
Code Implementation:
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. The Canny Edge Detector
The Canny edge detector is a multi-stage algorithm for detecting edges.
Code Implementation:
# Apply Canny edge detector edges = cv2.Canny(image, threshold1=100, threshold2=200)
Creating a Flask Web Application
1. Set Up the Flask App
Create a file named 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. Define Routes
Upload Route:
@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')
Process Image Function:
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)
Result Route:
@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. Run the App
if __name__ == '__main__':
app.run(debug=True)
Styling the Web Application with Bootstrap
Include Bootstrap CDN in your HTML templates for styling.
1. upload.html
Create a templates directory and add 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. result.html
Create result.html in the templates directory:
<!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>
Running and Testing the Application
1. Run the Flask App
python app.py
2. Access the Application
Open your web browser and navigate to http://localhost:5000.
- Upload an image and click Upload and Process.
- View the edge detection results.
SAMPLE RESULT
Conclusion
We've built a simple web application that performs edge detection using the Sobel operator and the Canny edge detector. By integrating Python, OpenCV, Flask, and Bootstrap, we've created an interactive tool that allows users to upload images and view edge detection results.
Next Steps
- Enhance the Application: Add more edge detection options or allow parameter adjustments.
- Improve the UI: Incorporate more Bootstrap components for a better user experience.
- Explore Further: Deploy the app on other platforms like Heroku or AWS.
GitHub Repository: Edge Detection App
The above is the detailed content of Implementing Edge Detection with Python and OpenCV: A Step-by-Step Guide. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1653
14
1413
52
1304
25
1251
29
1224
24
Python vs. C : Applications and Use Cases Compared
Apr 12, 2025 am 12:01 AM
Python is suitable for data science, web development and automation tasks, while C is suitable for system programming, game development and embedded systems. Python is known for its simplicity and powerful ecosystem, while C is known for its high performance and underlying control capabilities.
How Much Python Can You Learn in 2 Hours?
Apr 09, 2025 pm 04:33 PM
You can learn the basics of Python within two hours. 1. Learn variables and data types, 2. Master control structures such as if statements and loops, 3. Understand the definition and use of functions. These will help you start writing simple Python programs.
Python: Games, GUIs, and More
Apr 13, 2025 am 12:14 AM
Python excels in gaming and GUI development. 1) Game development uses Pygame, providing drawing, audio and other functions, which are suitable for creating 2D games. 2) GUI development can choose Tkinter or PyQt. Tkinter is simple and easy to use, PyQt has rich functions and is suitable for professional development.
The 2-Hour Python Plan: A Realistic Approach
Apr 11, 2025 am 12:04 AM
You can learn basic programming concepts and skills of Python within 2 hours. 1. Learn variables and data types, 2. Master control flow (conditional statements and loops), 3. Understand the definition and use of functions, 4. Quickly get started with Python programming through simple examples and code snippets.
Python vs. C : Learning Curves and Ease of Use
Apr 19, 2025 am 12:20 AM
Python is easier to learn and use, while C is more powerful but complex. 1. Python syntax is concise and suitable for beginners. Dynamic typing and automatic memory management make it easy to use, but may cause runtime errors. 2.C provides low-level control and advanced features, suitable for high-performance applications, but has a high learning threshold and requires manual memory and type safety management.
Python: Exploring Its Primary Applications
Apr 10, 2025 am 09:41 AM
Python is widely used in the fields of web development, data science, machine learning, automation and scripting. 1) In web development, Django and Flask frameworks simplify the development process. 2) In the fields of data science and machine learning, NumPy, Pandas, Scikit-learn and TensorFlow libraries provide strong support. 3) In terms of automation and scripting, Python is suitable for tasks such as automated testing and system management.
Python and Time: Making the Most of Your Study Time
Apr 14, 2025 am 12:02 AM
To maximize the efficiency of learning Python in a limited time, you can use Python's datetime, time, and schedule modules. 1. The datetime module is used to record and plan learning time. 2. The time module helps to set study and rest time. 3. The schedule module automatically arranges weekly learning tasks.
Python: The Power of Versatile Programming
Apr 17, 2025 am 12:09 AM
Python is highly favored for its simplicity and power, suitable for all needs from beginners to advanced developers. Its versatility is reflected in: 1) Easy to learn and use, simple syntax; 2) Rich libraries and frameworks, such as NumPy, Pandas, etc.; 3) Cross-platform support, which can be run on a variety of operating systems; 4) Suitable for scripting and automation tasks to improve work efficiency.
