flaskでPOSTで受け取った画像をbase64形式で表示する

実施したかった事
①htmlのFormから画像をPOST送信する
②POST送信された画像をbase64形式でブラウザ表示させる
(サーバー上に画像を保存せずに、ブラウザに表示させる)

実装手順
ソース:https://app.box.com/s/ulqkx6eg1s2iyi2ehaohy628pyxc07hs

# app.py
@app.route('/upload', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
        # formからファイルデータを取得
        file = request.files['file']

        # bytesをbase64にエンコードするライブラリをインポート
        import base64
        import re

        content_type = ''
                # ファイル形式を取得
        if 'png' in file.content_type:
            content_type = 'png'
        elif 'jpeg' in file.content_type:
            content_type = 'jpeg'
 
        # bytesファイルのデータをbase64にエンコードする
        uploadimage_base64 = base64.b64encode(file.stream.read())
        
        # base64形式のデータを文字列に変換する。その際に、「b'」と「'」の文字列を除去する
        uploadimage_base64_string = re.sub('b\'|\'', '', str(uploadimage_base64))
        
        # 「data:image/png;base64,xxxxx」の形式にする
        filebinary = f'data:image/{content_type};base64,{uploadimage_base64_string}'

        
        return render_template('uploaded_file.html', filebinary=filebinary)
 #uploaded .html
{% extends "base.html" %}
{% block content %}
<h1>ファイルアップロード完了</h1>
<h2>{{ filename }}</h2>
<div>
    <!-- base64形式のイメージを表示する -->
    <img src="{{filebinary}}" alt="画像">
</div>
{% endblock %}

この記事が気に入ったらサポートをしてみませんか?