-2

For an example I have this image template.

Sample Image Template

Now I want to fetch name data from API and write the name in that image after "Name:" like this and make it downloadable. How can I do it?

Image after adding name from json data

Hm Elius Hossain Himel
  • 21
  • 6
  • Use position:absolute and adjust the top and left. – Chinmay235 Dec 26 '22 at 13:02
  • 1
    The answer to this question might help, in accepted answer click 'Run code snippet' and try to save the image, you can see how image and text both get downloaded as a sinle image- https://stackoverflow.com/questions/31570798/how-to-make-html-div-with-text-over-image-downloadable-savable-for-users – RRR Dec 26 '22 at 13:05
  • @RRR isn't it possible to dynamically make the image? I'm looking for something which will generate a new image from that template using the data. – Hm Elius Hossain Himel Dec 26 '22 at 13:13
  • Yes you can use the html2canvas library to render your DOM element to a canvas, where the user can then download it. – RRR Dec 26 '22 at 13:19

1 Answers1

-1

There are some packages to create images from your HTML (HTML to PDF etc.) Don't try to edit the image, just create a regular h1 tag with name, add your fetched name, then export that into one final image

Yosi Leibman
  • 386
  • 3
  • 16