How to add text in a image template using html, css and jacascript?-CodePudding

For an example I have this 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?

CodePudding user response：

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

CodePudding user response：

CSS position property is used to set the position of text over an image. This can be done by enclosing the image and text in an HTML “div”. Then make the position of div “relative” and that of text “absolute”. The absolute elements are positioned relative to their parent (div). The top, right, bottom, and left properties of these elements specify their location from the parent.