How to create an image based on text and CSS?

Question

I am developing a web application. It generates signatures for the game with information from its API.

I need to save images using a script that collects information and turns it into an image.

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

Answer 1

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

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

Sample 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>