如何基于文本和CSS生成图像？ [英] How can I generate an image based on text and CSS?

问题描述

我正在开发一个网络应用程序。它使用来自其API的信息为游戏生成签名。

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.

您知道将文字+ CSS转换成图像的方法吗？

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

推荐答案

是的，可以这样做，你想要做的是在画布上绘制文本，然后保存画布。你不需要画布展示，你可以像任何其他html元素一样隐藏它，只需添加它，在其上绘制文本，然后保存它。

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.

这里是保存库的链接：
https://github.com/hongru/canvas2image

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>

这篇关于如何基于文本和CSS生成图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！