vue电子签名（适用于PC端和移动端）

一、效果展示

二、代码示例

1.引入库

代码如下（示例）：

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>这是电子签名组件</span>
      </div>
      <div class="text item">
        1.定义数据和清空、生成事件回调
      </div>
      <div class="text item">
        2.模板中使用组件,并属性传值
      </div>
      <div class="text item">
        3.上传到oss并返回访问路径在模板中显示
      </div>
      <div class="text item">
        <img :src="resultImg" class="show-img" v-if="resultImg != ''">
        <div class="show-info" v-else>请在下方书写电子签名</div>
      </div>
    </el-card>
    <el-card class="qianming-container" body-style="padding:0px">
      <vue-esign ref="esign"  :isCrop="isCrop" :width="600" :height="300" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" ></vue-esign>
      <div class="contro-container">
        <el-button type="danger"  @click="handleReset">清空画板</el-button>
        <el-button type="primary" @click="handleGenerate">生成图片</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name:'Qianming',
  data(){
    return {
      lineWidth: 6,
      lineColor: '#000000',
      bgColor: '',
      resultImg: '',
      isCrop: false
    }
  },
  methods:{
    //清空画板..
    handleReset () {
      this.$refs.esign.reset();
      this.resultImg =''
    },
    //生成签名图片..
    handleGenerate () {
      this.$refs.esign.generate().then(res => {
        let randnum = Math.random() * 10000000000000
        randnum = Math.floor(randnum)
        let fileName = "dianziqianming/" + randnum + '.png'
        let file = this.dataURLtoFile(res,fileName)
        client.put(fileName, file).then(res=>{
          if(res.url){
            this.resultImg = res.url
          }else{
            this.$message.error('文件上传失败')
          }
        }).catch(err=>{})
      }).catch(err => {
        this.$message.error('请签名之后提交！')
      })
    },
    //将base64转换为文件..
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while(n--){
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, {type:mime});
    }
  }
}
</script>

<style scoped>
button{
  height:40px;
}
.show-img{
  width:400px;
  height:200px;
  border:1px solid #123456;
}
.show-info{
  width:400px;
  height:200px;
  font-size:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.contro-container{
  width:600px;
  height:50px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-around;
  background-color:#D3D3D3;
  position:absolute;
  bottom:0px;
}
.qianming-container{
  width:600px;
  height:350px;
  margin:20px auto;
  position:relative;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.box-card {
  width: 95%;
  margin-left:2.5%;
  margin-top:20px;
}
</style>