MiniMagickで画像合成してみた

用意した画像
やったこと
結果

MiniMagickを使って、画像を生成してみました。

用意した画像

ベース画像

ベース画像サンプル

ユーザー画像

ユーザー画像サンプル

フォントファイル

やったこと

アイコン画像を丸く切り抜く

Convertメソッドを使い、既存画像を読み込み加工をして出力します。

# ユーザー画像を元に新しい画像を生成する
# 円状に切り抜く
# 新しい画像は `out_put.png` に出力される
user_image = MiniMagick::Image.open({ユーザー画像パス})
MiniMagick::Tool::Convert.new do |img|
  img.size "#{user_image.height}x#{user_image.width}"
  img << 'xc:transparent'
  img.fill user_image.path
  img.draw 'translate 150, 150 circle 0,0 150,0'
  img.trim
  img << 'out_put.png'
end

ベース画像に切り抜いた画像を合成する

Compositeメソッドを使い、ベース画像に先程出力した画像を上に重ねます。

画像の起点や起点からの位置を指定します。

# ユーザーアイコンを合成する
# ベース画像の上にユーザー画像重ねる
# 起点は左上としました（NorthWest）
# 起点からの位置を指定
base_image = MiniMagick::Image.open({ベース画像パス})
result = base_image.composite(MiniMagick::Image.open('out_put.png')) do |config|
  config.compose 'Over'
  config.gravity 'NorthWest'
  config.geometry '+90+80'
end

合成した画像にさらにテキストを合成する

合成した画像にテキストを描画して合成する

CSSと同じ要領で色・フォントサイズを指定します。

今回は中央に配置しました。

result.combine_options do |config|
  config.font {フォントファイルパス}
  config.fill '#333333'
  config.gravity 'center'
  config.pointsize 65
  config.draw "text 0.0 'テキスト合成'"
end