導入
エッジ検出はコンピューター ビジョンの基礎であり、画像内のオブジェクトの境界を識別できるようになります。このチュートリアルでは、Python と OpenCV で Sobel オペレーターと Canny エッジ検出器を使用してエッジ検出を実装します。次に、ユーザーが画像をアップロードして結果を表示できるように、Flask を使用して、Bootstrap でスタイル設定された単純な Web アプリケーションを作成します。
デモリンク: エッジ検出デモ
前提条件
- 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)
ログイン後にコピー
結果ルート:
@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. アプリを実行する
if __name__ == '__main__':
app.run(debug=True)
ログイン後にコピー
ブートストラップを使用した Web アプリケーションのスタイル設定
スタイル設定のために HTML テンプレートに Bootstrap CDN を含めます。
1. アップロード.html
テンプレート ディレクトリを作成し、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.結果.html
テンプレート ディレクトリに result.html を作成します。
<!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>
ログイン後にコピー
アプリケーションの実行とテスト
1. Flask アプリを実行する
2. アプリケーションにアクセスします
Web ブラウザを開いて http://localhost:5000 に移動します。
- 画像をアップロードし、「アップロードして処理」をクリックします。
- エッジ検出結果を表示します。
サンプル結果
結論
Sobel オペレーターと Canny エッジ検出器を使用してエッジ検出を実行する単純な Web アプリケーションを構築しました。 Python、OpenCV、Flask、Bootstrap を統合することで、ユーザーが画像をアップロードしてエッジ検出結果を表示できる対話型ツールを作成しました。
次のステップ
- アプリケーションの強化: エッジ検出オプションを追加するか、パラメータ調整を可能にします。
- UI の改善: ユーザー エクスペリエンスを向上させるために、より多くの Bootstrap コンポーネントを組み込みます。
- さらに詳しく調べる: Heroku や AWS などの他のプラットフォームにアプリをデプロイします。
GitHub リポジトリ: エッジ検出アプリ
以上がPython と OpenCV を使用したエッジ検出の実装: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
