今まで手動で作成していたOGP用画像をPythonの画像処理ライブラリPillowを使って生成する

GitHubで公開しました🎉
https://github.com/nekocodeX/OGP-Generator

これを開発する

仕様

• 生成解像度: 1200px × 630px
• オーバーレイの色: #000000
• オーバーレイの不透明度: 75%
• フォント: Koruri Light
• タイトルフォントサイズ: 128px
• 説明フォントサイズ: 48px
• 行間: -20px

• コンソールアプリケーション
• コマンドライン引数
  • OGP背景用の画像のパス
  • OGP用画像内のタイトル
  • OGP用画像内の説明
  • OGP背景用画像のトリミング位置

とりあえず、今までGIMPで作ってきたOGP用画像を生成出来るようになるのが目標

使用ライブラリ

• コマンドライン引数
  • いい感じにパースしてくれる argparse を使用
• 画像処理
  • 有名な Pillow を使用

様々な解像度 (と想定される) OGP背景用画像をどう処理するか

縦横比を維持しながら、生成解像度 (1200px × 630px) にリサイズするために、Pillow の resize() メソッドを使用したりしたが、思うようにならない

どんな比率のデータが投げられたとしても、いい感じに拡大縮小を行って全体を覆いたいという目的を達成するメソッドが Pillow の中の ImageOps にあるとのこと

ImageOps.fit() を使うといい感じに処理できた

全体を覆うように切り出すので、どの部分を使うかの指定が可能

今回は以下のように辞書を使うことで、直感的に切り替えられるように工夫した

from PIL import Image, ImageOps

def generate_ogp_bg(ogp_bg, width=1200, height=630, mode="t"):
    mode_dict = {
        "t": (0.5, 0.0),  # Top
        "c": (0.5, 0.5),  # Center
        "b": (0.5, 1.0)   # Bottom
    }
    # 指定されたOGP背景用画像をいい感じにトリミング
    canvas = ImageOps.fit(ogp_bg, (width, height), centering=mode_dict[mode])

    return canvas

実行結果

処理画像

mode="t"

mode="c"

mode="b"

いい感じ

いろいろいじりながら、何とか形になってきた

完全一致とまではいかないが、少しずつ手を加えながら改善していきたいと思う

GIMPで作ったOGP用画像

今回開発したOGP用画像生成ソフトで作ったOGP用画像