你是不是经常浏览字体网站的时候，发现他们的“字体生成器”和预览功能很好奇，为什么输入框输入文字之后，点击预览，下面都会修改对应的字体内容，以便达到了没有安装字体也可以预览这个字体效果的目的。
原理哔哔：
其实这个功能不难，原理很简单，就是通过js动态修改字体样式，然后用canvas渲染出字体，将图片的src路径替换，就实现了我们想要的目的。光说不练假把式，为了快速实现功能我没有用原生js或jquery，直接用了VUE的表单双向绑定特效，实现了：在线测试： https://course.51qux.com/fontcreat。
如下图：案例中我将文本内容、字体类型、字号、颜色都设置成允许用户自定义修改的表单，然后通过button点击事件绑定生成器的方法，最后生成的图片又绑定到img的src属性上。
实现步骤：
1.引入Vue文件，并写好HTML布局
https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js
<div class="wrapper">
<textarea name="" v-model="msg" ></textarea>
<select name="" v-model="font">
<option value="微软雅黑">微软雅黑</option>
<option value="宋体">宋体</option>
</select>
<input type="number" name="" v-model="fontSize" />
<input type="color" name="" v-model="fontCor" />
<button @click="creatImg">生成</button>
<div class="fontimg">
<img id="imgbox" :src="imgSrc"/>
</div>
</div>
2.绑定vue元素，设置data初始数据，实现功能：
<script type="text/javascript">
var app = new Vue({
el:".wrapper",
data:{
msg:"你好，这里是测试的内容",
font:"微软雅黑",
fontSize:'18',
fontCor:"#000000",
imgSrc:''
},
methods:{
creatImg:function(){
this.drawLogo(this.msg,this.font);
},
drawLogo: function(text, font) {
// 创建画布
let canvas = document.createElement('canvas');
// 绘制文字环境
let context = canvas.getContext('2d');
// 设置字体
context.font = font;
// 获取字体宽度
let width = context.measureText(text).width;
// 如果宽度不够 240
if (width < 240) {
width = 600;
} else {
width = width + 30;
}
// 画布宽度
canvas.width = width;
// 画布高度
canvas.height = 80;
// 填充白色
context.fillStyle = '#ffffff';
// 绘制文字之前填充白色
context.fillRect(0, 0, canvas.width, canvas.height);
// 设置字体
context.font = this.fontSize+"px "+font;
// 设置水平对齐方式
context.textAlign = 'center';
// 设置垂直对齐方式
context.textBaseline = 'middle';
// 设置字体颜色
context.fillStyle = this.fontCor;
// 绘制文字(参数：要写的字，x坐标，y坐标)
context.fillText(text, canvas.width / 2, canvas.height / 2);
// 生成图片信息
let dataUrl = canvas.toDataURL('image/png');
this.imgSrc = dataUrl;
return dataUrl;
},
}
})
</script>