[英]How can I generate an image based on text and CSS?
I'm developing a web app. 我正在开发一个网络应用程序。 It generates signatures for a game, with information from its API.
它使用来自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? 你知道一种将文字+ CSS变成图像的方法吗?
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.
你不需要画布显示,你可以像任何其他html元素一样隐藏它,只需添加它,在其上绘制文本,然后保存它。
Here is a link on a library that saves: https://github.com/hongru/canvas2image 以下是保存库的链接: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.