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

こんにちは！

今回の記事では、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>

これで準備は完了です。