How to insert text into an image

How do I insert text into an image? I need this to make a share your business card feature. or if anyone can offer other suggestions to make the feature? Whatever it is thank you in advance.

Hello @johny.kantacb.
Have you tried using the group component and label element?

If you set the groups background image and then use the kabel component you can achieve text and image in once.

If you want an image file you can use the canvas for that.
Use a canvas label and set the stage it’s background image and you’d be good to go.

1 Like

Thanks for the solution, but is there any other way of not using Canvas, like inserting text into the image component?

There is no way to export an image so even though it’s possible to layer text on top of an image, there is no way to share that. What I’ve been doing is using a PDF generation API such as Adobe Acrobat or Docsfold to generate the PDF from a visual template with variable text values. Then that PDF url can be shared.

1 Like

Can’t you take a picture of the canvas using blocks and download it using the new download blocks or use it in the image component or doesn’t that accept base64? Because then he could use that and work further from there.

2 Likes

Yes, sorry, there’s no way to take a screenshot of an Image component but yes, you can effectively do the same thing using the canvas and sprites. I just find it clunky and I’ve never had success with getting the Canvas to render properly.

1 Like

I’m sorry @tatiang but I meant the image of [canvas] Block sorry for the confusion :sweat_smile:

2 Likes