VUE----电子签名

我使用的是vue-cli2

1.下载插件：

npm install vue-esign --save

2.全局引入：

//main.js中引入：
import vueEsign from 'vue-esign'
Vue.use(vueEsign)

3.示例代码：

<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>
    import client  from 'common/js/ossClient.js'
    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>

4.文件格式：

默认canvas会生成base64格式的图片，使用oss上传需要将图片转化成标准图片格式，转化方法代码：

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});
}

5.组件样式：

初始样式截图 签字样式