前端文字直接转换成图片

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 前端文字转图片。果然，有需求就一定有市场。