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)
實(shí)際上他的思路就是顽照，將需要轉(zhuǎn)換的文字寫在canvas畫布上，然后將canvas畫布轉(zhuǎn)換為base64的圖片哑诊，再將base64圖片賦值在img標(biāo)簽的src上扛点。
var html = '<img width="' + name.length * 12 + '" height="' + 14 + '" src="' + nameBase64 + '" />'
之所以要傳入width和height，是因?yàn)檫@樣可以讓每個(gè)圖片都按照比例縮放下來续镇，賦值到img標(biāo)簽上之后美澳，會(huì)顯得比較和諧一些。
效果如下：
效果.png
DOM元素.png
圖中摸航，有四張生成的圖片制跟，以及一段文字，只要樣式處理一下酱虎，圖片與文字無縫連接雨膨。
剛接到這個(gè)需求的時(shí)候，我的第一想法是读串，我能把圖片直接轉(zhuǎn)化成base64聊记，那么圖片轉(zhuǎn)換的base64中，一定有一段編碼代表的是圖片中的內(nèi)容恢暖，那么我只要把我需要轉(zhuǎn)化的文字再轉(zhuǎn)換成base64然后再把圖片中的那部分代表圖片內(nèi)容的編碼替換掉就好了排监。
然后我就看了好多的base64的編碼原理，走了好多彎路杰捂，直到看到了這篇文章：JS 前端文字轉(zhuǎn)圖片舆床。果然，有需求就一定有市場(chǎng)嫁佳。
