Tuesday, June 4, 2024
 Popular · Latest · Hot · Upcoming
155
rated 0 times [  160] [ 5]  / answers: 1 / hits: 21879  / 11 Years ago, fri, july 12, 2013, 12:00:00

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?


More From » javascript

 Answers
8

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>

[#77032] Thursday, July 11, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
gabriel

Total Points: 323
Total Questions: 107
Total Answers: 108

Location: Federated States of Micronesia
Member since Sun, May 16, 2021
3 Years ago
;