【Python Flask】で画像をファイルパスではなくデータとしてhtmlに埋め込む

テーマはFlaskで画像をエンコード文字列としてhtmlに渡す方法 pythonの話

画像を表示するときに、サーバに保存している画像ファイルのパスで表示したくないときがあるかも知れません。
そこで、画像データをhtmlに流し込んで画像を表示する方法を試してみました。

画像をbase64でエンコードしてhtmlで表示させる

まずは、app.pyのほうです。

base64で画像ファイルをエンコードして、render_templateで変数に格納してhtmlに渡します。

# 画像を開いてbase64にエンコードする関数
def imagetobase64(image_path):
    with open(image_path, "rb") as image_file:
        encoded_string = base64.b64encode(image_file.read()).decode().replace("'", "")
    return encoded_string

@app.route('/')
def index():
    image_base64 = imagetobase64("test.jpg")
    return render_template('index.html', image_base64=image_base64)

htmlです。
imgタグで、srcに”tata:image/画像形式;base64,画像エンコード文字列”で指定すると画像を表示することができます。

jpegの場合
<img src="data:image/jpeg;base64,{{image_base64}}" width="400px"/>

pngの場合
<img src="data:image/png;base64,{{image_base64}}" width="400px"/>

画像を表示するだけなら「data:image/jpeg;・・」の画像形式の部分は何を指定しても影響がないようです。”image/aaa;”にしても画像は表示されます。
ただ、右クリックで名前を付けて保存のときに、ここの指定で拡張子が決まるようので「jpg」や「aaa」などでは拡張子が付きません。(jpeg形式はjpgではだめなようです。)

コメント

タイトルとURLをコピーしました