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

For example,

www.sfcnr.com/sig/VenoM. www.sfcnr.com/sig/Lorenc

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

Responses:

Offer your help. Be nice!

@mr_dave
2

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 https://github.com/niklasvh/html2canvas 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: https://jsfiddle.net/AbdiasSoftware/7PRNN/

Reading Material: toDataURL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/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!