ブログβ版を開発・公開しました

文字画像ジェネレーターを作ってみた

はじめに

先日、勤め先の社内報にこのような画像が掲載されていました。

同じチームのリスペクトして止まない先輩だったわけですが、これを見て思いました。

これは素材として使える!…と。

そんな経緯からこの画像を有効活用すべく、私の中で先輩画像ジェネレータープロジェクトが始まりました。

1. 画像の切り出し&修正

使ったツールは以下2つ。

  • MAC純正 プレビューアプリ
  • photopea

ご存知の通り、MAC純正のプレビューアプリは強力な編集機能を備えています。背景の切り抜き&透明化程度なら1分無いうちにできてしまいます。

photopeaは無料PhotoShop風Webアプリです。無料の割にかなり高度な画像編集が可能で、今回の画像に対しては特定エリアの切り出しなどもささっとできてしまいました。ただ、日本語には対応しているもののドキュメントが少ないのが惜しいです。

最終的に出来上がったのがこちら

いい感じに背景とスケッチブック内の描画を切り抜くことができました。

2. 画像ジェネレーター(Webアプリ)の実装

よくある画像ジェネレーターWebアプリを用意しました。

利用した主要技術(フレームワーク)は以下3つ。

  • canvas
  • vue
  • vuetify

実装方法などの詳細はこちらのページにまとめてあります。

canvasを使って画像中の特定範囲にテキストを描画する (文字画像ジェネレーター) - Qiita
# やりたいこと * 画像上の特定範囲の上下左右中心にテキストを描画 * リアルタイムで編集 * 編集後の画像をコピー、ダウンロード (本記事では含まない) いわゆる**吹き出し画像向けの文字画像ジェネレーター** # 作ってみ...

実際の動き

おわりに

画像ジェネレーターは案外簡単に作れた。

VueやReactなんかのSPAフレームワークのおかげで、この手のリアルてタイム描画系(バインディング)の処理実装が本当に楽になったと感じます。

コメント