<div style="display:none">
? ? <img ref="conf0" src="../../assets/image/tx.jpg">
</div>

// 獲取Canvas 畫圖
let myCanvas = this.$refs.myCanvas
var ctx = myCanvas.getContext('2d')
?
// 在Canvas畫布 添加圖片
var img = this.$refs.conf0
img.onload = () => {
? ctx.drawImage(img, 0, 0)
}

<template>
  <div>
    <img src=""
         alt=""
         id="newimage"
         style="width:278px;height:298px">
    <canvas id="canvas"
            width="278"
            height="298">
    </canvas>
  </div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.newImage('123#')
  },
  methods: {
    newImage (text) {
      // 生成圖片
      var imageBox = document.getElementById("newimage")
      var canvas = document.getElementById("canvas")
      var cxt = canvas.getContext("2d")
      var img = new Image()
      img.src = require('@/assets/louceng.png')
      // 圖片加載完成，才可處理
      img.onload = () => {
        // 畫圖(這里畫布與圖片等寬高)
        cxt.drawImage(img, 0, 0)
        // 設(shè)置字體大小
        cxt.font = "36px Microsoft YaHei"
        // 更改字號后，必須重置對齊方式，否則居中麻煩。設(shè)置文本的垂直對齊方式
        cxt.textBaseline = 'middle'
        cxt.textAlign = 'center'
        // 距離左邊的位置
        var left = canvas.width / 2
        // 距離上邊的位置 (圖片高-文字距離圖片底部的距離)
        var top = canvas.height * 0.14
        // 文字顏色
        cxt.fillStyle = "#ffffff"
        // 文字在畫布的位置
        cxt.fillText(text, left, top)
        imageBox.src = canvas.toDataURL("image/jpg")
        // this.flag = 1
      }
    },
  }
}
</script>