VUE生成图片(自定义文字)

newImage (text) {
  var canvas = document.createElement('canvas') //准备空画布
  var cxt = canvas.getContext("2d")
  var img = new Image()
  img.src = require('@/assets/images/Starry.jpg')
  // 图片加载完成，才可处理
  img.onload = () => {
    // 画图(这里画布与图片等宽高)
    cxt.drawImage(img, 0, 0)
    // 设置字体大小
    cxt.font = "100px Microsoft YaHei"
    // 更改字号后，必须重置对齐方式，否则居中麻烦。设置文本的垂直对齐方式
    cxt.textBaseline = 'middle'
    cxt.textAlign = 'center'
    // 距离左边的位置
    var left = canvas.width / 2
    // 距离上边的位置 (图片高-文字距离图片底部的距离)
    var top = 80
    // 文字颜色
    cxt.fillStyle = "#ffffff"
    // 文字在画布的位置
    cxt.fillText(text, left, top)
    this.imgTextUrl = canvas.toDataURL("image/jpg")
    sessionStorage.setItem("imgTextUrl",this.imgTextUrl)
  }
},