In one of our previous articles, we covered image overlays which allow you to overlay an image over another image. In this section we will look at overlaying text on to an image.
We will be using this image as our base image. Credits: pexels.com
Basic text overlay
Let's write the text "Hand with a green plant" on this image. This can be done using the 'ot' transformation parameter. If you text contains spaces, then you can write it as is, without modifications.
Positioning the text
Positioning works in the same way as images - using relative position like top_left using the 'ofo' parameter or using absolute x and coordinates using the 'ox' and 'oy' parameters. This positioning has been explained here.
Let's position this text 10px from the top edge and 10px from the left edge.
Color of the text
Let's say we want to turn this text to green color to match that of the plant. This can be done using the 'otc' transformation parameter. You can specify a 6-character Hex code for the color with this parameter.
Size of the text
The above text is very small in terms of font size compared to the rest of the image. The default font size used is 14px. You can change the font size using the 'ots' transformation parameter. You can specify the numerical value of the font size along with this parameter.
Here is an example of changing the font size to 30px
Changing the typography of the text (bold or italic)
We may want to make the text bold or italic or both. This can be done using the 'ott' transformation parameter. The valid values can be 'b' (for bold) or 'i' (for italics) or 'bi' / 'ib' (for bold and italics).
Here is an example for making the text bold
Here is an example making the text bold and italics
Changing the font of the text
The font of the text too can be changed directly from the URL. By default, the font family used is Open Sans. The font can be changed using the 'otf' transformation parameter. The following fonts are supported by ImageKit
Let's change the font family to PT Mono. As it doesn't support bold or italics, we are removing the typography 'ott' parameter.
Changing text opacity
The text opacity can be changed using the 'oa' transformation parameter in the URL. It can have integral values from 1 (10% or 0.1 opacity) to 9 (90% or 0.9 opacity).
Here is an example of giving 50% (or 5) opacity to the text. To provide a better understanding of the text opacity, we have removed the x and y positioning parameters from the URL. As it is evident from the image below, the hand and the plant are partially visible behind the text.
Characters supported in text overlays
The following characters can be used in text overlays
- All digits and alphabets (lower and upper case)
- Spaces, underscores and hyphen
- Percentage (%), alias (@), ampersand (&) and single quote (')
These characters may have to be encoded before specifying in the URL
Here is an example image using these characters
If you have any questions or feature request for text overlays, reach out to us at firstname.lastname@example.org