In this tutorial we will be looking at how to add text overlays on any image using URL based APIs. A text over an image looks much more attractive than a simple text and we all agree to it. So let’s see how to do it.
Cloudinary has a lot of APIs to add overlays to images. We can use them to place a text anywhere on the image.
Let’s take any image of our choice from the web.
Link: https://res.cloudinary.com/lakshmi07/image/upload/v1657265503/1_hoeje0.jpg
To add text, we’re going to add a second transform — transforms in Cloudinary are separated by forward slashes (/) — that tells Cloudinary to add a text overlay using the font Arial at 64pt size:
Link: https://res.cloudinary.com/lakshmi07/image/upload/l_text:arial_64:Ready%20to%20Code/1_hoeje0.jpg
This is how it looks after adding text to the image.
- l_text: tells Cloudinary that we’re going to do a text overlay
- arial_64: configures the text overlay to use Arial at 64pt
- Ready%20to%20Code is the URL-encoded text we want to display
Now, we see that the text is by default black in color and it doesn’t get highlighted on our dark background. So let’s change the text color. All we have to do it add another small string i.e. “co_white”.
Link: https://res.cloudinary.com/lakshmi07/image/upload/co_white,l_text:arial_64:Ready%20to%20Code/1_hoeje0.jpg
This looks much better!
We can also add X and Y offsets to text overlays in Cloudinary. The offsets start from wherever the gravity is set, so in this case our X offset will be from the left edge and the Y offset will be from the bottom.
We can do several other things to style our text on the image. Explore Cloudinary to learn more.
Hope you enjoyed this tutorial. And learnt how to add text overlays using Cloudinary.
Hope you enjoyed this tutorial. And learnt how to add text overlays using Cloudinary.