Another text overlay display on an image

As @tsuji_koichi already published, I think the trick of displaying text overlay on an image is very popular.
I tried a similar trick using Cloudinary (@LeventK seems to like it too ).

3X_2_a_2a3a2c7e059e55217a73bdbbabc21c586a207d8b.gif

Preparation before working with AppSheet
Upload your images to Cloudinary.

I won’t go into details, but Cloudinary allows you to do various image manipulations on demand by setting the URL parameters as follows

Original Image URL

https://res.cloudinary.com/tmiyai/image/upload/v1612613900/ghibli/mononoke046.jpg

Custom Image URL

https://res.cloudinary.com/tmiyai/image/upload/l_v1612613900:black_bar,g_south,w_1.0,h_0.1,fl_relative,o_50,y_30/g_south,l_text:montserrat_80:AppSheet,y_40,co_rgb:CCCCCC/v1612613900/ghibli/mononoke046.jpg

Setting up in AppSheet
If you’re an AppSheet Developer, you’ve probably figured out the trick the moment you saw Cloudinary’s custom URL

You can create a variety of images by simply configuring the VC according to Cloudinary’s syntax

ex)

"https://res.cloudinary.com/tmiyai/image/upload/"&
IFS([isShowBackground], [BackgroundOption]) &
"c_fit,g_"&[Text_position]&
",l_text:"&[Font]&"_"&[FontSize]&
":"&ENCODEURL([Subtitle])&
",y_"&[Text_y]&",co_"&[FontColor]&
"/v1612613900/ghibli/"&[Image]. [File Name].

If you are interested, you can create a subtitle with the sample application to see how it works.
https://www.appsheet.com/samples/Sample-App?appGuidString=88c65761-0a53-4315-83d4-88f21c11a62d

Finally, Thanks to Studio Ghibli for the great Image!

Inspired by Post

[Add text as layer to Image - Free API service](https://community.appsheet.com/t/add-text-as-layer-to-image-free-api-service/26894/) Tips & Tricks ?

Another free API and easy to handle to add “text” over image we capture through the app. https://textoverimage.moesif.com/#documentation Possible use case could be add date/time at the corner of image as indication when (possibly where) the image was captured. It is bit nostalgic now but we place the date or datetime to the coner of the image like the film camera did in old days… Add dynamic title and subtitle to own image as background / banner etc. How to use? …

13 Likes

Thank you for sharing @Takuya_Miyai

The fact that one can change the font type, font size, font color text position in the image, and finally even background can be optionally shown or hidden create multiple possibilities of using these options.

The sample app you have shared is also very neat- it immediately demonstrates the various capabilities of text overlay options.

Thank you.

8 Likes

I would like to know if that s possible to overlay text over an image I captured or chose from gallery.

What would be the best way to automate this? For an ongoing project, manually uploading images will be a bit tedious.

@venky369

I haven’t tried it myself, but Cloudinary has an Upload API.
By using this API and GAS, I think it will be possible to post images from AppSheet.

https://cloudinary.com/documentation/image_upload_api_reference

1 Like