How can I generate an image based on text and CSS?

Question

I'm developing a web app. It generates signatures for a game, with information from its API.

I'll need to store the images with a script that gathers the information and turns it into an image.

Do you know a way to turn text + CSS into an image?

Answer 1

Yes this can be done, what you want to do is draw the text on a canvas, and then save the canvas. you do not need to have the canvas show, you can hide it like any other html element, just add it, draw the text on it, and save it.

Here is a link on a library that saves: https://github.com/hongru/canvas2image

Some sample code drawing text on canvas:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Your Text",10,50);

// save img
Canvas2Image.saveAsImage(c, 200, 100, 'png');
</script>