Cloudinary の画像にテキストを重ねる（overlay）

はじめに

Cloudinaryについて、調べたこと、試したことのメモになります
間違っていたり、より良いアプローチがあったり、いろいろと至らない部分も多々あるかと思います

テキストを重ねる

アップロードした画像に対して、テキストを重ねるためのパラメータ（l_text）が用意されています

https://res.cloudinary.com/bonyou/s--32NIEymH--/l_text:Arial_45_bold:overlay/blog/309/kitten

l_text:Arial_45_bold:overlay の部分がテキストを重ねるためのパラメータになっています

テキストの色を変える

co_rgb パラメータを使ってテキストの色を指定することができます

https://res.cloudinary.com/bonyou/s--4koyKmsd--/co_rgb:ffffff,l_text:Arial_45_bold:overlay/blog/309/kitten

テキストの位置を変える

gravity パラメータや、x, y パラメータを使ってテキストの位置を指定することができます

https://res.cloudinary.com/bonyou/s--h7D8o1Mw--/g_south_east,l_text:Arial_45_bold:overlay/blog/309/kitten

https://res.cloudinary.com/bonyou/s--Vu_yNN_1--/g_south_east,l_text:Arial_45_bold:overlay,x_10,y_20/blog/309/kitten

使用できる gravity パラメータについては以下を参照ください

Image Transformations for Developers | Cloudinary

Learn how to dynamically transform images with one line of code: crop, resize, add borders and background, face detection, rich image effects, and more.

cloudinary.com

また、その他いくつかの方法が、公式のcookbookにサンプルとともに説明があります

Text overlay positioning | Cloudinary Cookbook

Dynamically add custom text strings. Customize the text's position, font, decoration, weight, color, size, and more.

cloudinary.com

テキストの折り返し（改行）

テキストの折り返しにはいくつかの方法があります

https://res.cloudinary.com/bonyou/s--RHt6PwsB--/l_text:Arial_45_bold:overlay long text/blog/309/kitten

改行文字（%0A）を使う

改行させたい箇所に、%0A を入れる

https://res.cloudinary.com/bonyou/s--6JZalxGi--/l_text:Arial_45_bold:overlay%0Along%0Atext/blog/309/kitten

任意の位置で改行をさせたい場合は、この方法が良いでしょう

自動改行させる

自動で改行させるには、c_fit パラメータと、w, h パラメータを使います

https://res.cloudinary.com/bonyou/s--xNxDAo7z--/c_fit,l_text:Arial_45_bold:overlay long text,w_150/blog/309/kitten

w で指定した幅を超える場合に、自動で折り返されます
h を指定した場合、その高さを超える場合には「…」によって省略されます

https://res.cloudinary.com/bonyou/s--vy12wVVp--/c_fit,h_100,l_text:Arial_45_bold:overlay long text,w_150/blog/309/kitten