vue实现签名和两张图片合成一张

效果就是如下了，
签名的组件我用的是百度的这个组件，地址是：https://github.com/JaimeCheng/vue-esign

使用组件的话：
安装
npm install vue-esign --save
引入
import vueEsign from ‘vue-esign’
Vue.use(vueEsign)

<template>
  <div>
    <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
    <button @click="handleReset">清空画板</button>
    <button @click="handleGenerate">生成图片</button>
    <button @click="drawProdPicture">合成图片</button>
    <div style="border: solid 2px red">
    <img :src="resultImg">
    </div>
    <img :src="makePic">
  </div>

</template>
<script>
  /**
   * npm install vue-esign --save
   *
   * https://github.com/JaimeCheng/vue-esign
   */
  import Vue from 'vue';
  //引入组件
  import vueEsign from 'vue-esign';
  //这里就是我猫咪照片的地址
  import bgPic from '@/assets/images/demo.jpg';
  Vue.use(vueEsign)
  export default {
    data () {
      return {
        lineWidth: 6,
        lineColor: '#000000',
        bgColor: '',
        //签名图
        resultImg: '',
        isCrop: false,
        //底图
        bgPic: bgPic,
        makePic: ''
      }
    },
    methods: {
      handleReset () {
        this.$refs.esign.reset()
      },
      handleGenerate () {
        this.$refs.esign.generate().then(res => {
          debugger
          this.resultImg = res
          console.log(res);

        }).catch(err => {
          alert(err) // 画布没有签字时会执行这里 'Not Signned'
        })
      },
      drawProdPicture () {
        debugger;
        let img1 = new Image()
        img1.src = this.bgPic
        img1.width = 1496
        img1.height = 866
        img1.setAttribute('crossOrigin', 'anonymous')
        let canvas = document.createElement("canvas")
        let context = canvas.getContext("2d")
        canvas.width = 1500
        canvas.height = 866
        let img2 = new Image()
        let flag = true
        // 将 img1 加入画布
        img1.onload = () => {
          context.drawImage(img1, 0, 0, 1495, 866)
          img2.src = this.resultImg
          img2.setAttribute('crossOrigin', 'anonymous')
          img2.width = 60
          img2.height = 30
          if (flag) {
            flag = false
          } else {
            let src = canvas.toDataURL()
            this.makePic = src
          }
        }
        // 将 img2 加入画布
        img2.onload = () => {
          context.drawImage(img2, 1000, 566, 160, 136)
          if (flag) {
            flag = false
          } else {
            let src = canvas.toDataURL('image/png')
            this.makePic = src
          }
        }

      }
    }
  }
</script>

如果是H5实现这个功能的话可以参考这篇文章：https://blog.csdn.net/weixin_42102798/article/details/103615523