Hawk Vision — Smart Cropped Images Addon
Hawk Visionプラグインに、画像のクロップヒントを基にして任意のアスペクト比でスマートに切り取り&任意のサイズにスケールする機能「Smart Cropped Images」を追加するアドオンを作りました。
5ドルの買い切り型で、サーバーへのインストール台数制限もありません。
可能になること
上の鷹の写真画像をメディアライブラリにアップロードして、Hawk Visionで得られるクロップヒントの結果が下です。
Smart Cropped Images アドオンを利用すると、このクロップヒントを基にして、指定した任意のアスペクト比で画像を切り取ることが可能となります。
以下は管理画面のインターフェース上で 1.0, 1.5, 0.666, 2.35 などさまざまなアスペクト比を入力してみた様子ですが、それに合わせた領域が明るく示され、クロップヒントに追従するように配置されていることが分かるかと思います。
1.0 ／ 右: アスペクト比 0.75
0.666 ／ 右: アスペクト比 2.35これらは Smart Cropped Imagesを生成する ボタンをクリックすることで、実際に画像として保存され、WordPress の wp-content/uploads 内の専用ディレクトリに格納されます。
画面内に Smart Cropped Imagesをダウンロードする というボタンがあることから分かると思いますが、ここから生成した画像をダウンロードしたり削除することも可能になっています。
専用メソッド hawkvision_get_sci
上記は管理画面のHawk Visionインターフェース上で行ったものですが、Smart Cropped Imagesを生成する専用のメソッド hawkvision_get_sci も用意しており、これを使えばテンプレートファイル内で
$smart_cropped_image = hawkvision_get_sci(array(
'post_id' => 123,
'size' => 'w640',
'aspect' => .666,
'force_generate' => true
));と記述するだけで、
- 目的の画像IDからクロップヒントを読み込み
- 指定のアスペクト比で切り取るべき領域を計算し
- 画像を切り取り
- 目的のサイズにスケールダウンして保存し
- 生成されたSmart Cropped Imageの画像メータデータを得る
という複雑な工程を一発で行うことが出来ます。
実際に得られるデータは以下とおり。
Array
(
[status] => 'success'
[src] => Array
(
[0] => 'https://.../image_ch-manual_sci-666_w640.jpg'
[1] => 639
[2] => 960
[3] => 1
)
[size] => 'w640'
[aspect] => 0.666
[crophint] => 'manual'
[is_sci] => 1
[load] => 'cache'
)あとは上記で得られた src を <img> に適用してHTML出力などすれば画像として表示ができるわけです。
毎回クロップヒントの解析を行うの？
Hawk Visionはクロップヒントの抽出時にGoogle Cloud Vision APIの従量課金が適用されるため、では
Smart Cropped Imagesを使って様々なアスペクト比で画像の切り取りを行った場合、毎回課金の対象となるの？
という点でご心配があるかもしれませんが、答えは「いいえ」です。
Smart Cropped Imagesは「既に解析・抽出されたクロップヒント」を利用して画像の切り取り処理を行うため、
- 何種類もの異なったアスペクト比で切り取ろうとも
- 何枚切り取っても
課金されることはありません。
より精度の高い切り取りを可能にしたい場合、本来は指定のアスペクト比に合わせて都度クロップヒントを解析した方が良いのですが、それでは毎回解析処理が走り課金の対象となってしまいますし、画像の切り取り処理にも多くの時間がかかってしまうことから実用的ではありません。
Smart Cropped Imagesアドオンではそうした点も考慮し実利のある仕様で実装を進めました。
一般的な画像の切り抜きツールではアスペクト比の指定は出来ても、「被写体を大きく損なうことなく」というような曖昧な指定をすることは出来ません。
Hawk Visionプラグイン + Smart Cropped Imagesアドオンを利用することで、これまでは人力で行っていた
- 商品一覧ページの指定アスペクト比の商品サムネイル画像を、商品がなるべく見切れないよう「いい感じ」に切り取る
という一見簡単なようで複雑で時間のかかる作業を、テンプレート内のメソッドに書くだけで実現できることになります。
枚数が多いと人力ではミスも起こりがちなものですが、Smart Cropped Imagesアドオンであれば疲れ知らずで作業を任せられますので、皆さんはウェブサイト上の演出表現などじっくりと作業をしたい部分に時間をかけてやってください。
