知识

分享你我感悟

您当前位置>首页 >> 相关知识 >> 建站知识>

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

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



原理哔哔:

其实这个功能不难,原理很简单,就是通过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>