Cloudinary の画像にテキストを重ねる(overlay)

cloudinary

はじめに

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.

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

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

テキストの折り返し(改行)

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

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

コメント

タイトルとURLをコピーしました