はじめに
ある日のこと、こんなやりとりが発生しました。
フロントエンドメンバー：「今、デザインの時に使う画像が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できます。
これをどこかのサーバに立てれば好きな画像のリサイズしたものがすぐに手に入ります。画像はランダムで取得されるようにしているので種類を増やせば、色々な種類の画像が手に入ります。（何かのリストを表示する時にランダム性があると嬉しいと言われたため）
あとはhtmlに下記のように書けばOK!
<img src="http://xxx.xxx.xxx.xxx/images/human/300x200">
ソースコード
ソースコードはこちらです。