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

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

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

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>

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

© 版权声明
THE END
喜欢点个赞支持一下吧
点赞0赏币
分享
评论交流 抢沙发

请登录后发表评论