介绍

边缘检测是计算机视觉的基础，使我们能够识别图像中的对象边界。在本教程中，我们将使用 sobel 算子和 canny 边缘检测器以及 python 和 opencv 来实现边缘检测。然后，我们将使用 flask 创建一个简单的 web 应用程序，并使用 bootstrap 进行样式设计，以允许用户上传图像并查看结果。

演示链接：边缘检测演示

先决条件

• 您的计算机上已安装 python 3.x。
• python 编程基础知识。
• 熟悉 html 和 css 会有所帮助，但不是必需的。

设置环境

1.安装所需的库

打开终端或命令提示符并运行：

pip install opencv-python numpy flask

2.创建项目目录

mkdir edge_detection_app
cd edge_detection_app

实施边缘检测

1. 索贝尔算子

sobel 算子计算图像强度的梯度，强调边缘。

代码实现：

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. canny 边缘检测器

canny 边缘检测器是一种用于检测边缘的多级算法。

代码实现：

# apply canny edge detector
edges = cv2.canny(image, threshold1=100, threshold2=200)

创建 flask web 应用程序

1. 设置 flask 应用程序

创建一个名为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. 定义路线

上传路线：

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

处理图像函数：

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)

结果路线：

Beautiful.ai

AI在线创建幻灯片

下载

@app.route('/result/')
def display_result(filename):
    return render_template('result.html',
                           original_image='uploads/' + filename,
                           sobelx_image='outputs/sobelx_' + filename,
                           edges_image='outputs/edges_' + filename)

3. 运行应用程序

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

使用 bootstrap 设计 web 应用程序的样式

在 html 模板中包含 bootstrap cdn 以进行样式设置。

立即学习“Python免费学习笔记（深入）”；

1.上传.html

创建templates目录并添加upload.html：

    
    
    
    


    

        
upload an image for edge detection
        

            

                

                    

                        choose an image:
                        
                    
                    upload and process
                
            
        
    

2.结果.html

在templates目录下创建result.html：

    
    
    
    


    

        
edge detection results
        

            

                
original image
                @@##@@
            
            

                
sobel x
                @@##@@
            
            

                
canny edges
                @@##@@
            
        
        

            process another image
        
    

运行和测试应用程序

1. 运行 flask 应用程序

python app.py

2. 访问应用程序

打开网络浏览器并导航至 http://localhost:5000。

• 上传图像并单击“上传并处理”。
• 查看边缘检测结果。

结果示例

结论

我们构建了一个简单的 web 应用程序，使用 sobel 算子和 canny 边缘检测器执行边缘检测。通过集成 python、opencv、flask 和 bootstrap，我们创建了一个交互式工具，允许用户上传图像并查看边缘检测结果。

后续步骤

• 增强应用程序：添加更多边缘检测选项或允许参数调整。
• 改进ui：融入更多bootstrap组件，提供更好的用户体验。
• 进一步探索：在 heroku 或 aws 等其他平台上部署应用程序。

github 存储库：边缘检测应用