function textToImg(name, width, height) {
var fsize = 120;
var fontSize = 120;
var fontWeight = "normal";
var canvas = document.getElementById("head_canvas_default");
var img1 = document.getElementById("head_canvas_default");
canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");
context.fillStyle = 'transparent';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#66CCFF";
context.font = fontWeight + " " + fsize + "px sans-serif";
context.textAlign = "left";
context.textBaseline = "top";
context.fillText(name, 0, 0);
return canvas.toDataURL("image/png")
}
var nameBase64 = textToImg(name, name.length * 12 * 10, 14 * 10)
实际上他的思路就是，将需要转换的文字写在canvas画布上，然后将canvas画布转换为base64的图片，再将base64图片赋值在img标签的src上。
var html = '<img width="' + name.length * 12 + '" height="' + 14 + '" src="' + nameBase64 + '" />'
之所以要传入width和height，是因为这样可以让每个图片都按照比例缩放下来，赋值到img标签上之后，会显得比较和谐一些。
效果如下：
效果.png
DOM元素.png
图中，有四张生成的图片，以及一段文字，只要样式处理一下，图片与文字无缝连接。
刚接到这个需求的时候，我的第一想法是，我能把图片直接转化成base64，那么图片转换的base64中，一定有一段编码代表的是图片中的内容，那么我只要把我需要转化的文字再转换成base64然后再把图片中的那部分代表图片内容的编码替换掉就好了。
然后我就看了好多的base64的编码原理，走了好多弯路，直到看到了这篇文章：JS 前端文字转图片。果然，有需求就一定有市场。
