Python と OpenCV を使用したエッジ検出の実装: ステップバイステップ ガイド
導入
エッジ検出はコンピューター ビジョンの基礎であり、画像内のオブジェクトの境界を識別できるようになります。このチュートリアルでは、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 アプリを実行する
python app.py
2. アプリケーションにアクセスします
Web ブラウザを開いて http://localhost:5000 に移動します。
- 画像をアップロードし、「アップロードして処理」をクリックします。
- エッジ検出結果を表示します。
サンプル結果
結論
Sobel オペレーターと Canny エッジ検出器を使用してエッジ検出を実行する単純な Web アプリケーションを構築しました。 Python、OpenCV、Flask、Bootstrap を統合することで、ユーザーが画像をアップロードしてエッジ検出結果を表示できる対話型ツールを作成しました。
次のステップ
- アプリケーションの強化: エッジ検出オプションを追加するか、パラメータ調整を可能にします。
- UI の改善: ユーザー エクスペリエンスを向上させるために、より多くの Bootstrap コンポーネントを組み込みます。
- さらに詳しく調べる: Heroku や AWS などの他のプラットフォームにアプリをデプロイします。
GitHub リポジトリ: エッジ検出アプリ
以上がPython と OpenCV を使用したエッジ検出の実装: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1673
14
1429
52
1333
25
1278
29
1257
24
Python vs. C：曲線と使いやすさの学習
Apr 19, 2025 am 12:20 AM
Pythonは学習と使用が簡単ですが、Cはより強力ですが複雑です。 1。Python構文は簡潔で初心者に適しています。動的なタイピングと自動メモリ管理により、使いやすくなりますが、ランタイムエラーを引き起こす可能性があります。 2.Cは、高性能アプリケーションに適した低レベルの制御と高度な機能を提供しますが、学習しきい値が高く、手動メモリとタイプの安全管理が必要です。
Pythonの学習：2時間の毎日の研究で十分ですか？
Apr 18, 2025 am 12:22 AM
Pythonを1日2時間学ぶだけで十分ですか？それはあなたの目標と学習方法に依存します。 1）明確な学習計画を策定し、2）適切な学習リソースと方法を選択します。3）実践的な実践とレビューとレビューと統合を練習および統合し、統合すると、この期間中にPythonの基本的な知識と高度な機能を徐々に習得できます。
Python vs. C：パフォーマンスと効率の探索
Apr 18, 2025 am 12:20 AM
Pythonは開発効率でCよりも優れていますが、Cは実行パフォーマンスが高くなっています。 1。Pythonの簡潔な構文とリッチライブラリは、開発効率を向上させます。 2.Cのコンピレーションタイプの特性とハードウェア制御により、実行パフォーマンスが向上します。選択を行うときは、プロジェクトのニーズに基づいて開発速度と実行効率を比較検討する必要があります。
Python vs. C：重要な違いを理解します
Apr 21, 2025 am 12:18 AM
PythonとCにはそれぞれ独自の利点があり、選択はプロジェクトの要件に基づいている必要があります。 1）Pythonは、簡潔な構文と動的タイピングのため、迅速な開発とデータ処理に適しています。 2）Cは、静的なタイピングと手動メモリ管理により、高性能およびシステムプログラミングに適しています。
Python Standard Libraryの一部はどれですか：リストまたは配列はどれですか？
Apr 27, 2025 am 12:03 AM
PythonListSarePartOfThestAndardarenot.liestareBuilting-in、versatile、forStoringCollectionsのpythonlistarepart。
Python：自動化、スクリプト、およびタスク管理
Apr 16, 2025 am 12:14 AM
Pythonは、自動化、スクリプト、およびタスク管理に優れています。 1）自動化：OSやShutilなどの標準ライブラリを介してファイルバックアップが実現されます。 2）スクリプトの書き込み：Psutilライブラリを使用してシステムリソースを監視します。 3）タスク管理：スケジュールライブラリを使用してタスクをスケジュールします。 Pythonの使いやすさと豊富なライブラリサポートにより、これらの分野で優先ツールになります。
科学コンピューティングのためのPython：詳細な外観
Apr 19, 2025 am 12:15 AM
科学コンピューティングにおけるPythonのアプリケーションには、データ分析、機械学習、数値シミュレーション、視覚化が含まれます。 1.numpyは、効率的な多次元配列と数学的関数を提供します。 2。ScipyはNumpy機能を拡張し、最適化と線形代数ツールを提供します。 3. Pandasは、データ処理と分析に使用されます。 4.matplotlibは、さまざまなグラフと視覚的な結果を生成するために使用されます。
Web開発用のPython：主要なアプリケーション
Apr 18, 2025 am 12:20 AM
Web開発におけるPythonの主要なアプリケーションには、DjangoおよびFlaskフレームワークの使用、API開発、データ分析と視覚化、機械学習とAI、およびパフォーマンスの最適化が含まれます。 1。DjangoandFlask Framework：Djangoは、複雑な用途の迅速な発展に適しており、Flaskは小規模または高度にカスタマイズされたプロジェクトに適しています。 2。API開発：フラスコまたはdjangorestFrameworkを使用して、Restfulapiを構築します。 3。データ分析と視覚化：Pythonを使用してデータを処理し、Webインターフェイスを介して表示します。 4。機械学習とAI：Pythonは、インテリジェントWebアプリケーションを構築するために使用されます。 5。パフォーマンスの最適化：非同期プログラミング、キャッシュ、コードを通じて最適化
