使用Canvas合成多张图片和文字为一张图片

完整demo代码，vue

<!-- 图片合成demo -->
<template>
  <div class="view-wrap">
    <h3>我是canvas图片文字合成组件</h3>
    <img ref="img1" src="./1.jpg" alt />
    <img ref="img2" src="./2.jpg" alt />
    <div>
      <el-input v-model="text" placeholder="请输入内容" style="width: 250px;"></el-input>
      <el-button type="primary" @click="handleConposeImg">合成</el-button>
    </div>
    <div ref="photo" class="photo"></div>
    <canvas v-show="false" ref="myCanvas" id="myCanvas"></canvas>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      text: ''
    }
  },
  computed: {},
  methods: {
    onCreateCanvas() {
      let img1 = this.$refs.img1
      let img2 = this.$refs.img2
      // console.log(img1.naturalWidth, img1.naturalHeight) 可获取图片的原始宽度和高度
      let img1Height = img1.naturalHeight
      let img2Height = img2.naturalHeight
      let canvasWidth = 200 // 这里设置固定值
      let canvasHeight = img1.naturalHeight + img2.naturalHeight // 合成的画布高度为两张图片高度之和
      let canvas = this.$refs.myCanvas
      let context = canvas.getContext('2d')
      canvas.width = canvasWidth // canvas画布宽度
      canvas.height = canvasHeight // canvas画布高度
      // 将img1、img2等依次加入画布
      context.drawImage(img1, 0, 0, 200, img1Height)  // 加入图片1
      context.drawImage(img2, 0, img1Height, 200, img2Height) // 加入图片2
      context.fillStyle = 'red' // 设置文字的填充颜色
      context.font = 'italic 20px Georgia' // 设置文字的填充样式
      context.fillText(this.text, 10, 140) // 在画布中添加文字
      let newImg = new Image()
      newImg.src = canvas.toDataURL('image/png') // canvas画布导出图片
      this.$refs.photo.append(newImg) // 将图片插入div中展示出来
    },
    // 点击合成按钮，执行合成方法
    handleConposeImg() {
      this.onCreateCanvas()
    }
  },
  mounted() {
    // // HACK:加上延时避免 mounted 方法比页面加载早执行
    // this.$nextTick(() => {
    //   setTimeout(() => {
    //     this.onCreateCanvas()
    //   }, 100)
    // })
  }
}
</script>

<style lang="scss" scoped>
</style>