如何基于文本和CSS生成图像?

时间:2013-07-12 15:32:51

标签: javascript

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

我需要使用收集信息的脚本存储图像并将其转换为图像。

您知道将文字+ CSS转换为图片的方法吗?

1 个答案:

答案 0 :(得分:10)

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

以下是保存库的链接: https://github.com/hongru/canvas2image

一些示例代码在画布上绘制文本:

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