以下の記事を参考に、Flaskで画像をアップロードして、加工できるWebアプリを作成しております。
Flaskで簡単につくる、画像処理した結果を見るだけのWebサービス
ローカル環境でapp.pyを実行し、同じローカル環境にある画像ファイルを選択し、[submit]ボタンを押しても画像がimagesフォルダに保存されず表示もできません。
解決方法をご教示いただけますと幸いです。
環境
Windows10
Python3.8.1
Flask1.1.1
OpenCV4.2.0
実行結果
ディレクトリ構造
app/app.py
app/image_process.py
app/templates/base.html
app/templates/index.html
app/images
ソースコード
app/app.py
python
1from flask import Flask, render_template, request, redirect, url_for, send_from_directory 2import numpy as np 3import cv2 4from image_process import canny 5from datetime import datetime 6import os 7import string 8import random 9 10SAVE_DIR = "./images" 11if not os.path.isdir(SAVE_DIR): 12 os.mkdir(SAVE_DIR) 13 14app = Flask(__name__, static_url_path="") 15 16 17def random_str(n): 18 return ''.join([random.choice(string.ascii_letters + string.digits) for i in range(n)]) 19 20 21@app.route('/') 22def index(): 23 return render_template('index.html', images=os.listdir(SAVE_DIR)[::-1]) 24 25 26@app.route('/images/<path:path>') 27def send_js(path): 28 return send_from_directory(SAVE_DIR, path) 29 30# 参考: https://qiita.com/yuuuu3/items/6e4206fdc8c83747544b 31@app.route('/upload', methods=['POST']) 32def upload(): 33 if request.files['image']: 34 # 画像として読み込み 35 stream = request.files['image'].stream 36 img_array = np.asarray(bytearray(stream.read()), dtype=np.uint8) 37 img = cv2.imdecode(img_array, 1) 38 39 # 変換 40 img = canny(img) 41 42 # 保存 43 dt_now = random_str(5) 44 save_path = os.path.join(SAVE_DIR, dt_now + ".png") 45 print(save_path) 46 cv2.imwrite(save_path, img) 47 48 print("save", save_path) 49 50 return redirect('/') 51 52if __name__ == '__main__': 53 app.debug = True 54 app.run() 55
image_process.py
python
1import cv2 2 3 4def canny(image): 5 return cv2.Canny(image, 100, 200)
html
1{% extends "base.html" %} 2{% block content %} 3 4<form action="/upload" method="post" enctype="multipart/form-data"> 5 <input type="file" name="image" accept="image/png, image/jpeg"> 6 <button type="submit">submit</button> 7</form> 8 9{% if images %} 10{% for path in images %} 11<div> 12 <img src="images/{{ path }}" style="margin-top: 10px; vertical-align: bottom; width: 200px;"> 13 {{ path }} 14</div> 15{% endfor %} 16{% endif %} 17 18{% endblock %}
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>API Sample</title> 9</head> 10 11<body> 12 {% block content %}{% endblock %} 13</body> 14 15</html>
回答1件
あなたの回答
tips
プレビュー