画像をBase64で表示させてみる

4 min readDec 27, 2016

画像をwebアプリケーションで表示させる方法はいくつかある。一番手っ取り早いのが<img src =”hoge.png”>タグで直接ファイルのパスを指定してやる方法。インタラクティブなグラフ画像を描写するHTMLを自動で作成してくれるライブラリなんかも存在する。

では、直接ファイルを残しておきたくないし、インタラクティブって何？ピカピカしたボタンなんか要らないんだけど…な向きにはどんな方法が良いのか。

よく知られた?方法のひとつとして、画像データをBase64にエンコードして文字列としてimgタグ属性の中に入れこむ方法がある。

そこで、画像をBase64にエンコードしてhtmlに埋め込む簡単なwebアプリをpythonで書いてみた。最近、周囲でflaskがユーザーが増えてきている気配があるのでフレームワークはflaskを使用。

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from flask import Flask,render_template,request,session,redirect,url_for
import os, random, base64, numpy as np ,matplotlib.pyplot as plt

app = Flask(__name__)
app.secret_key = 'qwert'
ht = {}

@app.route('/')
def index():
    return '''
        <form action="/makepng" method="post">
            <p><input type=text name=x>
            <p><input type=text name=y>
            <p><input type=text name=z>
            <p><input type=submit value=view!>
        </form>
        '''
@app.route('/makepng', methods=['POST'])
def make_png():
    x = np.arange(int(request.form['x']),\
                  int(request.form['y']),\
                  float(request.form['z']))
    y = np.sin(x)
    key=random.random()
    session['id']=key
    tmp="%s_tmp.png"%key
    plt.plot(x,y)
    plt.savefig(tmp)
    with open(tmp,"rb") as b:
        png_text = base64.b64encode(b.read()).decode("utf-8")
        ht[key]=png_text
        os.remove(str(session.get('id'))+"_tmp.png")
    return redirect(url_for('view_png'))

@app.route('/view')
def view_png():
    img = ht[session.get('id')]
    return '<img src="data:image/png;base64,' + img + '"/>'


if __name__ == "__main__":
    app.run()

セッション管理を簡単にするsessionオブジェクトを利用して、各ユーザーに固有のセッションidを作成する。それをハッシュテーブルのキーにして、Base64文字列にエンコードされた画像データを値として登録する。

おしまい。

以下余談

png_text = base64.b64encode(b.read()).decode("utf-8")

で作られた文字列を加工すると面白いことができる。

たとえば

def matplot_sucks(png_text):
    glitched_png_text = ""
    for c in png_text:
        if c == '0':
            glitched_png_text += str(randint(0,9))
        else:
            glitched_png_text += c
    return glitched_png_text

みたいにな関数を作れば、画像にグリッチノイズが入ってアートっぽくなるぞ！

画像をBase64で表示させてみる

Written by rodem