How do I fetch data from a file or database and apply it on a image (like a Signature Generator)

For example,

The signature generator clearly takes the data from a database and applies it on the background. How do I do that? I don't want to make a signature generator, I'm working on a result page of my website that should do the same on vertical rectangular boxes. Help is highly appreciated.

By @venom. on Tue 09 May 2017 |
Tags beginner


Offer your help. Be nice!


I've used PhantomJS as a static image generator before, using only HTML/CSS. However, PhantomJS is very outdated, but simple enough to still handle something like this for you. This requires a server. However, it sounds like you want to do this purely on the front-end without your own server?

If that's the case, I recommend using to convert HTML/CSS to something that can be saved as an image. So you don't have to be well versed in HTML5 Canvas and can focus on some simple HTML/CSS/JS.

Here's a JSFiddle (not mine) for converting Canvas to a Base64 image that can be downloaded as an image:

Reading Material: toDataURL:

Also, be sure to include what tech you're working with to accomplish your goal. It'd help others better answer your question. :)

Login to leave a response!