canvas学习——第三天

canvas学习第三天

使用canvas将文字生成图片

最后的结果就是类似这个样子，生成图片后将图片上传服务器后大功告成，正好可以使用之前学的canvas相关，ok，直接上代码：

    drawLogo() {
      const text = this.text // 要生成图片的文字
      const font = '微软雅黑' // 字体
      const fontSize = '70' // 字号
      const fontCor = '#5076B8'// 颜色
      // 创建画布
      const canvas = document.createElement('canvas')
      // 绘制文字环境
      const context = canvas.getContext('2d')
      // 设置字体
      context.font = font
      // 获取字体宽度
      const width = context.measureText(text).width
      // 画布宽度
      canvas.width = 702
      // 画布高度
      canvas.height = 180
      // 填充背景颜色
      context.fillStyle = '#f3f3f3'
      // 绘制矩形
      context.fillRect(0, 0, canvas.width, canvas.height)
      // 设置字体
      context.font = fontSize + 'px ' + font
      // 设置水平对齐方式
      context.textAlign = 'center'
      // 设置垂直对齐方式
      context.textBaseline = 'middle'
      // 设置字体颜色
      context.fillStyle = fontCor
      // 绘制文字(参数：要写的字，x坐标，y坐标，最大宽度)
      context.fillText(text, canvas.width / 2, canvas.height / 2, canvas.width - 70)
      // 生成图片URL
      const dataUrl = canvas.toDataURL('image/png')
      const formData = new FormData()
      //将URL转换为file类型
      formData.append('file', dataURLtoFile(dataUrl, 'file'))
	  //上传
      this.upload(formData)
    }

大致是这个样子，因为上传图片时是formdata类型，所以把base64转换成了file类型，当然，这个功能还是有些小问题，比如文字数量太多的话字会挤在一起，还是需要后续优化的。