はじめに
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
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
コメント