Back to Blog

FlaskとOpenCVを組み合わせて画像処理アプリケーションを作成する

flask

2024年9月4日

こんにちは!

今回の記事では、FlaskとOpenCVを組み合わせて画像処理アプリケーションを作成する方法について解説します。

FlaskとOpenCVのインストール

まず、FlaskとOpenCVのインストールを行います。

以下のコマンドを実行します。

pip install Flask opencv-python

アプリケーションの構成

このアプリケーションは、Flaskを使ってウェブサーバーを構築し、OpenCVによりアップロードされた画像を処理します。

アプリケーションのディレクトリ構造は以下のようになります。

/app
│
├── app.py (Flask アプリケーション)
├── templates(フロントエンド)
│   ├── display_image.html 
│   └── index.html
└── static
    └── uploads (アップロードされた画像を保存)

app.pyには、Flaskのファプリケーションの処理を記述します。また、OpenCVの処理もapp.pyに記述します。

また、templatesディレクトリには、HTMLやCSSのフロントエンドを記述します。

アップロードされた画像は、static/uploadsディレクトリに保存されます。

app.py

app.pyには、以下のように記述します。

import os
from flask import Flask, render_template, request, redirect, url_for
from werkzeug.utils import secure_filename
import cv2

app = Flask(__name__)

# アップロードされた画像を保存するディレクトリ
UPLOAD_FOLDER = 'static/uploads/'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

# 許可するファイル拡張子
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg'}

# ファイルの拡張子をチェック
def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload_image():
    # ファイルがアップロードされたかどうかを確認
    if 'file' not in request.files:
        return 'ファイルが選択されていません'
    
    file = request.files['file']

    # ファイルが正しいかどうかをチェック
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        file.save(filepath)

        # 画像を処理 (例: グレースケール変換)
        img = cv2.imread(filepath)
        gray_img = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
        processed_filepath = os.path.join(app.config['UPLOAD_FOLDER'], 'processed_' + filename)
        cv2.imwrite(processed_filepath, gray_img)

        # 処理後の画像を表示するためのリンクを返す
        return redirect(url_for('uploaded_file', filename='processed_' + filename))

    return '許可されていないファイル形式です'

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return render_template('display_image.html', filename=filename)

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

今回の処理は、画像をアップロードする処理と、OpenCVの処理を組み合わせています。画像アップロード機能の詳細については、こちらで解説しています。

Flaskで画像アップロード機能を実装する方法

以下の部分がOpenCVによる画像処理です。

今回は例としてグレースケールする処理をしていいます。

    # 画像を処理 (例: グレースケール変換)
        img = cv2.imread(filepath)
        gray_img = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
        processed_filepath = os.path.join(app.config['UPLOAD_FOLDER'], 'processed_' + filename)
        cv2.imwrite(processed_filepath, gray_img)

フロントエンドの作成

続いて、フロントエンドの作成をします。

templates/index.htmlは以下のように記述します。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画像アップロード</title>
  </head>
  <body>
    <h1>画像をアップロード</h1>
    <form action="/upload" method="post" enctype="multipart/form-data">
      <input type="file" name="file">
      <input type="submit" value="アップロード">
    </form>
  </body>
</html>

templates/display_image.htmlは以下のように記述します。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>処理された画像</title>
  </head>
  <body>
    <h1>処理後の画像</h1>
    <img src="{{ url_for('static', filename='uploads/' + filename) }}" alt="Processed Image">
    <br>
    <a href="/">別の画像をアップロード</a>
  </body>
</html>

これで準備は完了です。

アプリケーションの起動

最後にアプリケーションを起動します。

python app.py

ブラウザで http://127.0.0.1:5000/ にアクセスすると、画像をアップロードして処理を確認することができます。

これでFlaskとOpenCVを組み合わせた画像処理アプリケーションの作成が完了です。

まとめ

今回の記事では、FlaskとOpenCVを組み合わせた画像処理アプリケーションの作成を行いました。

Flaskでは、このようなOpenCVなどさまざまなライブラリと組み合わせて自由度の高いアプリを作成することが可能です。

今回の記事が何かのお役に立てれば幸いです。

ここまでお読みいただきありがとうございました。

             

Pythonの基礎から応用まで学べる
Python WebAcademy

Python WebAcademyでは、Pythonの基礎からアーキテクチャなどの応用的な内容まで幅広く学べます。また、ブラウザ上で直接Pythonコードを試すことができ、実践的なスキルを身につけることが可能です。

             Pythonの学習を始める