はじめに
Cloudinaryについて、調べたこと、試したことのメモになります
間違っていたり、より良いアプローチがあったり、いろいろと至らない部分も多々あるかと思います
テキストを重ねる
アップロードした画像に対して、テキストを重ねるためのパラメータ（l_text）が用意されています
https://res.cloudinary.com/bonyou/s--32NIEymH--/l_text:Arial_45_bold:overlay/blog/309/kittenl_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/kittenw で指定した幅を超える場合に、自動で折り返されます
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
コメント