アルパカログ

Webエンジニア兼マネージャーがプログラミングやマネジメント、読んだ本のまとめを中心に書いてます。

GCP Cloud Functions(GCF)を使って画像に文字を埋め込む方法

f:id:otoyo0122:20200919180213p:plain:w300

Twitterなどでよく、文字の入った画像を見かけます。

文字を画像に埋め込むのは、ImageMagickというライブラリを使うと実現できます。

このエントリでは、無料で使えるGCPのCloud Functions(GCF)を使って、POSTパラメータで受け取ったテキストを画像に描画するサンプルを作る方法を説明します。

システム構成

システム構成は下記の通りシンプルです。

f:id:otoyo0122:20180312202024p:plain:w600

一連の処理の流れは次のようになります。

  1. GCFのエンドポイントに対してテキストパラメータをPOSTする
  2. Cloud Storageに予め置いておいたテンプレート画像にImageMagickでテキストを描画する
  3. 画像ファイルを新しいファイル名(ハッシュ値)でCloud Storageに保存する
  4. 画像ファイル名をHTTPレスポンスで返す

前準備

事前にGCFのHTTP Tutorialを済ませておきます。

Cloud Storageにバケットを作成しテンプレート画像template.pngという名前で配置します。

任意のディレクトリに下記のサンプルコードをcloneします。

index.js内のバケット名の指定を、自身で作成したバケット名に修正します

const bucketname = 'BUCKET_NAME';

デプロイ

下記コマンドでデプロイします。デプロイは数分で完了します。

$ gcloud beta functions deploy imagemagick --trigger-http --source .

POST してみる

エンドポイントにPOSTしてみましょう。YOUR_ENDPOINTは自身のHTTPトリガーのURLにしてください。

$ curl -X POST -H "Content-Type:application/json" -d '{"text":"こんな風に描けるよ。"}' YOUR_ENDPOINT/imagemagick

Success: xxxxxxxx.pngというファイル名が返ってきたらCloud Storageにファイルができています。

POSTした文字が描画されていれば成功です。

f:id:otoyo0122:20180312203544p:plain:w400

以上です。

このエントリでは、無料で使えるGCPのCloud Functions(GCF)を使って、POSTパラメータで受け取ったテキストを画像に描画するサンプルを作る方法を説明しました。

参考になった方は、ぜひ「はてブ」やSNSでシェアしていただけると嬉しいです。

GCFの他の使い方が見たい

GCFの他の使い方が見たい方は下記のエントリが参考になりそうです。

alpacat.hatenablog.com

alpacat.hatenablog.com

alpacat.hatenablog.com

参考リンク