Cloudinaryではウォーターマークなど画像へのオーバーレイが簡単にできますが、複数の画像を重ねることはできますか？
ーーはい、できます！
Cloudinary は、画像や動画、その他のデジタルアセットを管理、変換・最適化、そして配信まですべてできる SaaS です。
これまでに技術的な解説ブログをいくつか書いてきましたが、今回は初心に立ち返って、ウォーターマークや画像を重ねるオーバーレイの基本的なやり方をご紹介します。
流れ
Media Library で画像変換
まずは Cloudinary のコンソールにログインし、Media Library で変換する画像を選び、Edit を選んで変換画面に移ります。
ベースの画像への変換はご自由に。今回は、自動で最適な圧縮をしてくれる q_auto と横幅サイズ 800px を指定しました。そして本題のオーバーレイ追加のため、Add overlay & watermark… をクリックします。
新しいセクション「Overlay image」が現れました。まずはロゴを入れようと思います。
Image ID にはCloudinary上のアセットのパス（パブリックID）を入力します。さらに今回は、横幅300px、Gravity で右上に配置、 XとYで右上の角からの距離、Opacityで透明度70%の変換を適用しました。
◆ 参考：パブリックIDとは？
Cloudinary では、重ねられるオーバーレイは無限大です。再度スクロールダウンして、Add overlay & watermark… をクリックし、次のオーバーレイを追加します。
パブリックIDは本来スラッシュ区切りですが、Image ID に指定する際はダブルコロンを使います。Media Library では、入力時に自動的に変換してくれ、今回 test/hoya_s は test:hoya_s になっています。
こうして、2つのオーバーレイを入れた画像URLがこちらです。
https://res.cloudinary.com/CLOUD-NAME/image/upload/c_scale,q_auto,w_800/c_scale,g_north_east,l_cm_logo_black_600,o_70,w_300,x_10,y_10/c_scale,g_south,l_test:hoya_s,w_300/v1600331668/test/hamburg.jpg
このURLは、分解すると次のような構成になっています。
https://res.cloudinary.com/CLOUD-NAME/image/upload
/c_scale,q_auto,w_800 ← 元の画像 hamburg への変換
/c_scale,g_north_east,l_cm_logo_black_600,o_70,w_300,x_10,y_10 ← オーバーレイ変換1
/c_scale,g_south,l_test:hoya_s,w_300 ← オーバーレイ変換2
/v1600331668/test/hamburg.jpg変換パラメータの更新
Cloudinary には幅広い変換パラメータが用意されていますが、残念ながら先ほどの Transformation Editor を使って適用できる範囲は限られています。
今回、もう少し高度な変換パラメータに調整するため、手動でパラメータを変更していきます。手動でいじっても、変更したURLを開くだけで即座にその画像が生成されるのも Cloudinary の強みです。
◼️ さらなるオーバーレイの追加
もう一つのオーバーレイを重ねてみます。こちらの変換にはサイズと配置位置だけでなく、画像の回転を適用させます。
- -140度に画像を回転する
a_-140を指定 - 縦幅200px、右下への配置を新しいレイヤーに(スラッシュで区切って)追加
- オーバーレイで複数レイヤーの変換を適用させるため、最後のレイヤーに
fl_layer_applyを追加
オーバーレイで複数の種類の変換を適用させる場合、毎回レイヤーで分けることが推奨されており、最後のレイヤーはこの fl_layer_apply というパラメータで閉じます。
https://res.cloudinary.com/CLOUD-NAME/image/upload/c_scale,q_auto,w_800/c_scale,l_cm_logo_black_600,w_300/o_70/g_north_east,x_10,y_10,fl_layer_apply/c_scale,l_test:hoya_s,w_300/g_south,fl_layer_apply/l_test:paw,a_-140/c_scale,w_200/g_south_east,x_40,y_10,fl_layer_apply/v1600331668/test/hamburg.jpg
◼️ 横幅指定をベース画像の相対値に
元の指定では、ベース画像が800px、ロゴ画像は300pxと具体的な値で指定していますが、ベース画像がどのようなサイズでも、その37%の割合でサイズ指定したいと思います。
w_300をw_0.37のようなパラメータに置き換え- ベース画像に比例した割合をサイズ指定するため、
fl_relativeというパラメータをそれぞれ追加
＊レイヤー（スラッシュ）内でのパラメータの指定順序は、結果に関係ありません。
https://res.cloudinary.com/CLOUD-NAME/image/upload/c_scale,q_auto,w_800/c_scale,l_cm_logo_black_600,w_0.37,fl_relative/o_70/g_north_east,x_0.01,y_0.01,fl_relative,fl_layer_apply/c_scale,l_test:hoya_s,w_0.37,fl_relative/g_south,fl_layer_apply/l_test:paw,a_-140/w_0.25,fl_relative/g_south_east,x_0.05,y_0.01,fl_relative,fl_layer_apply/v1600331668/test/hamburg.jpg
こうしてできあがった画像がこちらです。
これで、ベースとなる画像のサイズが変わっても、同様にオーバーレイを適用できます。
https://res.cloudinary.com/CLOUD-NAME/image/upload/c_scale,q_auto,h_500/c_scale,l_cm_logo_black_600,w_0.37,fl_relative/o_70/g_north_east,x_0.01,y_0.01,fl_relative,fl_layer_apply/c_scale,l_test:hoya_s,w_0.37,fl_relative/g_south,fl_layer_apply/l_test:paw,a_-140/w_0.25,fl_relative/g_south_east,x_0.05,y_0.01,fl_relative,fl_layer_apply/v1600331668/test/hamburg.jpg
▼ (2023/6/19追加) ここからさらに、この変換パラメータを名前登録し、他の画像に簡単に適用する方法を次のブログに紹介しました。
画像ソース
もっと詳しく
▼ 様々な変換パラメータについては、以下のブログを
▼ オーバーレイの配置などの基礎知識については、以下のブログを
▼ そしてウォーターマークの除去対策は以下のブログを
以上、Cloudinary で複数の画像をオーバーレイする方法をご紹介しました。ご参考になれば幸いです！
クラスメソッドはCloudinaryのパートナーとして導入のお手伝いをさせていただいています。お気軽にこちらからお問い合わせください。こちらから無料でもサインアップいただけます。
2
