FastAPI
前回、FastAPIのパスパラメータとクエリパラメータについて解説しました。
今回は画像をバックエンドであるFastAPIからフロントエンドであるJavaScriptに送るために必要な画像データのbase64形式への変換方法を紹介します。
基本的な手順としては
- 画像をバイナリファイルとして開く
- base64の形式（bytes型：文字列データ）に変換する
- 変換したデータを送る
という流れになります。
バイナリファイルとは（正直私自身よく分かっていませんが）、コンピュータの言語である２進数（0、1）で書かれたファイルで人間が見ても理解できないファイルのことらしいです。
画像データや音声データ、圧縮ファイルなんかもこのバイナリファイルとして保存されているとのこと。
実はほとんどのファイルはバイナリファイルで、バイナリファイルじゃないのはテキストファイルくらいなものらしいです。
次にbase64形式とはバイナリデータがそのままでは扱いづらいので、a～z、A～Z、0～9、+、/、=の64種類の文字を使って表すbytes型のデータ形式とのことです。
つまりコンピュータ語（バイナリ）からとりあえず人間が扱いやすい文字列データ（base64形式）にして、それを送るというわけです。
それでは始めていきましょう。
画像データをbase64形式に変換する方法
今回は画像データとして3PySciのロゴ（3pysci_logo.png）を使って解説していきます。
まずbase64を扱うため、「import base64」でライブラリをインポートします。
ちなみに標準ライブラリに含まれているため、インストールは不要です。
Pythonでバイナリファイルを開く場合は「with open(‘ファイルパス’, ‘rb’) as f_in:」のようにファイルを開くオプションとして「rb」を指定します。
そして開いたデータを「読み込んだファイル.read()」としてファイル全体を読み込みます。
その読み込んだデータを「base64.b64encode(読み込んだデータ)」とすることでbase64形式に変換できます。
ということでこんな感じ。
import base64
with open('./3pysci_logo.png', 'rb') as image:
base64_data = base64.b64encode(image.read())
print(base64_data)
実行結果
b'iVBORw0KGgoAAAANSUhEUgAAAkgAAAC0CAYAAABv0dPkAAAMTmlDQ1BJQ0MgUHJvZ
mlsZQAASImVlwdYU8kWgOeWVBJaIAJSQm+iCAIBpITQIghIFUQlJIGEEmNCULEjiwqu
XUTBhq6KKLoWQNaKvSyK3bUsFlRW1sVVbKi8SQFdfeV75/vm3j9nzpw552Tu3DsA6FX
zZbI8VB+AfGmBPD4ihDU2NY1FegwQYAaIwAQY8AUKGScuLhpA6b//U97cgNZQrrqpfH
3f/1/FQChSCABA4iBnChWCfMj7AcCLBTJ5AQBENtTbTimQqTgdspEcBghZpuJsDZeoO
（以下略）出力の最初の方を見てみると「b’iVBORw0KG…」となっています。
「b’文字列’」がこの文字列はbytes型であることを示しています。
今後、他のプログラムに送りたいのはシングルクオーテーションの中身の部分（むしろ「b”」は邪魔）なので、「bytes型のデータ.decode(‘utf-8’)」としてstr型（つまりは単なる文字列）に変換します。
import base64
with open('./3pysci_logo.png', 'rb') as image:
base64_data = base64.b64encode(image.read()).decode('utf-8')
print(base64_data)
実行結果
iVBORw0KGgoAAAANSUhEUgAAAkgAAAC0CAYAAABv0dPkAAAMTmlDQ1BJQ0MgUHJvZ
mlsZQAASImVlwdYU8kWgOeWVBJaIAJSQm+iCAIBpITQIghIFUQlJIGEEmNCULEjiw
quXUTBhq6KKLoWQNaKvSyK3bUsFlRW1sVVbKi8SQFdfeV75/vm3j9nzpw552Tu3Ds
A6FXzZbI8VB+AfGmBPD4ihDU2NY1FegwQYAaIwAQY8AUKGScuLhpA6b//U97cgNZQ
rrqpfH3f/1/FQChSCABA4iBnChWCfMj7AcCLBTJ5AQBENtTbTimQqTgdspEcBghZp
（以下略）これでbase64形式だけど「b”」が含まれない文字列データが取得できました。
これをJavaScriptに送ってやり、JavaScriptでバイナリデータ（画像データ）に変換してやることで画像をJavaScriptに送るというわけです。
その部分は次回に回すこととします。
Pythonでbase64形式のデータを画像に変換する方法
せっかく画像をbase64形式に変換したので、逆にbase64形式のデータを画像データにしてみましょう。
流れとしては、こんな感じです。
- base64形式のデータをbytes型のデータに変換
- バイナリデータに変換
- 保存
最初の「base64形式のデータをbytes型のデータに変換」するには「base64形式のデータ.encode()」とします。
そうして変換したデータを「base64.b64decode(変換したデータ)」としてバイナリデータに変換します。
Pythonでバイナリデータを保存するには「with open(保存先, ‘wb’) with f_out:」とオプションで「wb」とすることでバイナリファイルとして開いた後に「ファイル.write(データ)」として書き込みます。
ということでこんな感じ。
import base64
with open('./3pysci_logo.png', 'rb') as image:
base64_data = base64.b64encode(image.read()).decode('utf-8')
decode_img = base64.b64decode(base64_data.encode())
with open("3pysci_logo_decode.png", 'wb') as image_out:
image_out.write(decode_img)これを実行すると読み込んだロゴの画像と同じ画像のファイルが「3pysci_logo_decode.png」というファイル名で同じフォルダに保存されます。
ただし「3pysci_logo_decode.png」は一度base64形式に変換され、再度画像データ（バイナリデータ）に変換されたファイルです。
あまり実感は湧きませんが、とりあえず画像をbase64形式に変換すること、またbase64形式を画像ファイルに変換することができるようになりました。
次回はPythonで画像ファイルをbase64形式に変換したのち、JavaScriptに送るということをしてみましょう。
ではでは今回はこんな感じで。
コメント