VUE+Canvas实现输入文字生成字体图片小功能

在浏览一些字体网站的时候，会发现他们的“字体生成器”和预览功能很好奇，为什么输入框输入文字之后，点击预览，

下面都会修改对应的字体内容，以便达到了没有安装字体也可以预览这个字体效果的目的。比如下图。

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

实现步骤：

1.网页头部引入Vue文件，https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js，并写好HTML布局结构。如下

<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>

这样小功能就实现，就没有引入太多字体，仅仅用了大家电脑都有字体：雅黑和宋体，更多效果自行测试吧！