Cloudinaryで顔認識機能を使って上手に画像変換してみる

はじめに

清水です。前回のエントリでCloudinaryの管理画面を使った画像のリサイズやエフェクト処理について試してみました。

Cloudinaryで画像変換を試してみた

引き続き本エントリではCloudinaryの機能を試す場として、顔認識機能を機能を使って画像（写真）から人物の顔座標データを利用した画像変換を行ってみたのでまとめてみます。前回のエントリで紹介したようなリサイズ、エフェクトの処理のほか、Cloudinaryでは自動で画像ファイルに写っている「顔」を認識し、内部的に座標データと保持しているようです。そして画像のリサイズのような処理の際、この顔座標のデータを元に、顔を中心とたトリミングといった処理が行なえます。本エントリではこの機能を具体的に使用してみました。

ひとりだけ写っている画像の場合

まずは画像（写真）にひとりだけ人物が写っているようなケースです。Cloudinaryにアップロード直後は以下の状態になります。

ここで、「写っている人物の顔を中心、もしくは顔が写っていることを前提として、指定した解像度の画像データ欲しい」というようなケース、ありますよね。Cloudinaryを使うとこれが容易に実現できます。今回は例として解像度が400x400の顔が写っているデータを取得することを目的としてみます。

まずは解像度の指定として、Width: 400、Height: 400を入力します。続いてMode: Cropを選択しましょう。これで指定した解像度での切り抜きができます。ただし、この状態で[Refresh Preview]で画像を確認してみても、うまく顔が写っている箇所を切り取ってくれません。ちょうど中央部分から切り取っているのでしょうか、人物の下に写っている宮崎県のマスコットキャラクター（みやざき犬の「かぁ」くん）が切り取られてしまっていますね…

ここで設定するのがMode: Cropを選択した際に現れた「Gravity」の項目です。ここからGravity: Faceとなるよう選択しましょう。こちらのように上手に顔部分を残し、かつ400x400の指定した解像度の画像が得られました！

この画面上部のほう、[View derived images]ボタン左側にあるボタンをクリックしてみましょう。遷移先の画面でCloudinaryがどこを顔と認識しているかが確認できます。この顔部分を上手に残しながら解像度に合う画像を生成しているもようです。

複数人が写っている画像の場合

続いて画像（写真）に複数の人物が写っているようなケースです。Cloudinaryにアップロード直後の状態は以下となります。（ラスベガスにいた赤ジャンの方々ですね。）

ここから、例えば写っている全員の顔は残しつつ、画像をできるだけ小さくしたい、というようなケースを考えます。左右の余分なスペースはあまりありませんが、上下についてはある程度カットできそうですね。 Height: 350、Mode: Thumb、Gravity: Facesを選択してみます。Gravityについては人物がひとりだけのときに選択したFaceではなくFacesとなっている点に注意します。するとこちらのように、高さは350pxを維持しつつ、複数人の顔部分を残しながらうまくリサイズしてくれます。

が、一番右端の帽子をかぶった方が変換後の画像に含まれていません！ 先ほどの人物がひとりだけのときと同様に、Cloudinaryがどこを顔と認識しているか、右上のボタンから確認してみます。こちらのように、右端の方うまく顔が検知できなかったもようです。

こんなときでも手動で顔座標として追加することができます。右端の方の顔部分をドラッグアンドドロップで指定してみましょう。指定できたら画面下部の[Save coordinates]ボタンで保存します。

これで変換、生成される画像も更新できる！と思うのですが、元の画面に戻っても反映されていません。例えばここでHeight: 360などパラメータ（つまり画像のURLに関連するも）をどこか変更すれば、結果が反映されます。今度は10人全員の顔が画像に含まれていますね！

では先ほどと同じパラメータで画像を取得するにはどうすれば良いでしょうか。Cloudinaryの画像配信はCDNを経由しているため、キャッシュが効いて同一URLではすぐには更新が反映されないようです。ドキュメントを確認すると、URLのvで始まる英数字の部分がバージョン管理に利用できるようです。まずデフォルトではアップロードしたタイムスタンプを表しており、こちらの値を変更することで別バージョンとしてCDNにキャッシュされるとのことです。（Image Manipulation for Developers | CloudinaryのAsset versionsの項目から。）

ということで、顔座標の追加前のバージョンのURLから、vで始まる英数字の数字部分を1つインクリメントしたURLにアクセスしてみます。すると、無事に10人が並んだ画像が取得できました。

まとめ

クラウドベースの画像、動画などメディア管理、変換ツールであるCloudinaryで顔認識機能を使い、写真から顔座標を元にした画像変換を行ってみました。写真をCloudinaryにアップロードするだけで人物の顔を検知し、パラメータを少し追加するだけで、顔座標をもとにうまい具合に画像変換していくれるので、とても便利な印象です！また顔認識がうまくいかない場合でも手動で簡単に顔座標を追加できることも確認できました。引き続きCloudinaryの多様な機能を試して行きたいと思います。