你是不是经常浏览字体网站的时候，发现他们的“字体生成器”和预览功能很好奇，为什么输入框输入文字之后，点击预览，下面都会修改对应的字体内容，以便达到了没有安装字体也可以预览这个字体效果的目的。

原理哔哔：

其实这个功能不难，原理很简单，就是通过js动态修改字体样式，然后用canvas渲染出字体，将图片的src路径替换，就实现了我们想要的目的。光说不练假把式，为了快速实现功能我没有用原生js或jquery，直接用了VUE的表单双向绑定特效，实现了：在线测试：https://course.51qux.com/fontcreat。

如下图：案例中我将文本内容、字体类型、字号、颜色都设置成允许用户自定义修改的表单，然后通过button点击事件绑定生成器的方法，最后生成的图片又绑定到img的src属性上。

实现步骤：

1.引入Vue文件，并写好HTML布局

2.绑定vue元素，设置data初始数据，实现功能：

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;

},

}

})

这样小功能就实现，七娃 很懒，就没有引入太多字体，仅仅用了大家电脑都有字体：雅黑和宋体，更多效果自行测试吧！哈哈哈，vue真的适合单页面开发，比jquery轻便多了。