Python
Flask
pillow

Pythonでサンプル画像生成アプリを作る

はじめに

ある日のこと、こんなやりとりが発生しました。

フロントエンドメンバー:「今、デザインの時に使う画像がplaceholderを使ったグレーなシンプルなやつなんですが、もっとリアルな画像にしたい。」

僕:じゃあやりましょう!

ということでPythonでサンプル画像を作る方法です。

開発環境

開発環境は下記です。

  • Python 3.6
  • Flask 0.12.2
  • Pillow 5.0.0

API設計

:categoryはdogやhumanなど写真のカテゴリーです
:sizeは「100x100」というようなテキストです。

URL メソッド レスポンス 内容
/images/categories GET JSON形式 取得できるカテゴリー一覧の取得
/images/:category GET Content-type=Image 指定したカテゴリーのオリジナル画像の取得
/images/:category/:size GET Content-type=Image 指定したカテゴリーのリサイズ画像の取得

開発時に悩んだところ

テキストの描画

画像にテキストを描画する部分はPillowを使えばとっても簡単でした。
たった数行で画像にテキストを印字できます。fontも選べるのですごく便利ですね。

from PIL import Image, ImageDraw, ImageFont

img = Image.new("RGB", (512, 512), (128, 128, 128))
draw = ImageDraw.Draw(img)
font = ImageFont.truetype("font/example.otf", int(img.size[1]/10))
draw.text((0, 0), text, font=font, fill=(255, 255, 255, 100))

レスポンス部分

レスポンス部分の実装をどうするかが一番悩みポイントでした。
実際にはioモジュールのBytesIOを使ってバイナリストリームを使いました。
Flaskでレスポンスを作る際にはflaskモジュールにあるhelpersのmake_response関数を使って最終的なレスポンスデータを作成します。

buf = BytesIO()
img.save(buf, 'jpeg')
response = helpers.make_response(buf.getvalue())

できたもの

URLで指定したサイズに変更した画像がGETできます。
sample.gif

これをどこかのサーバに立てれば好きな画像のリサイズしたものがすぐに手に入ります。画像はランダムで取得されるようにしているので種類を増やせば、色々な種類の画像が手に入ります。(何かのリストを表示する時にランダム性があると嬉しいと言われたため)

あとはhtmlに下記のように書けばOK!

<img src="http://xxx.xxx.xxx.xxx/images/human/300x200">

ソースコード

ソースコードはこちらです。