Vue 实现电子签名_vue实现电子签名

1、下载插件

npm install vue-esign --save
1

2、全局引入

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

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});
}
1
2
3
4
5
6
7
8

5.组件样式

初始样式截图

签字样式

链接：https://www.jianshu.com/p/5d5f2917a87e