Cloudinary で複数の画像を重ねてみた

画像や動画のデジタルメディア管理・変換 SaaS、Cloudinary でウォーターマークとオーバーレイを簡単にやってみます。

#Cloudinary

#SaaS

Ito ma

2023.06.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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 の配信 URL とは？

変換パラメータの更新

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追加) ここからさらに、この変換パラメータを名前登録し、他の画像に簡単に適用する方法を次のブログに紹介しました。