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

- 日理万妓 2022-12-27 14:09 374阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA4NTc5Nw_size_16_color_FFFFFF_t_70]使用组件的话：  
**安装**  
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**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA4NTc5Nw_size_16_color_FFFFFF_t_70]: /images/20221120/7906626728aa46b48735c35e00b6d577.png