# 前言
使用【sign-canvas】 (opens new window)组件二次封装自定义手写签名组件,一个基于canvas
开发封装实现的通用手写签名板(电子签名板),支持PC
端和移动端,效果如下图所示:
# 安装
yarn add sin-canvas
1
# 全局引入
import SignCanvas from "sign-canvas";
Vue.use(SignCanvas);
1
2
2
# 组件封装
<template>
<div class="sign">
<el-dialog title="在线签名" :visible.sync="visible" :show-close="false">
<sign-canvas
class="sign-canvas"
ref="SignCanvas"
:options="options"
v-model="value"
/>
<div class="btnList">
<el-button
type="danger"
size="small"
icon="el-icon-delete"
@click="canvasClear()"
>清空</el-button
>
<el-button
type="primary"
size="small"
icon="el-icon-check"
@click="saveAsImg()"
>保存</el-button
>
<!-- <el-button-->
<!-- type="info"-->
<!-- size="small"-->
<!-- icon="el-icon-download"-->
<!-- circle-->
<!-- @click="downloadSignImg()"-->
<!-- >下载</el-button-->
<!-- >-->
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "signDialog",
props: {
//弹窗变量
visible: {
type: Boolean,
default: false
},
//图片信息Base64
src: {
type: String,
default: null
}
},
data() {
return {
value: null,
options: {
lastWriteSpeed: 1, //书写速度 [Number] 可选
lastWriteWidth: 2, //下笔的宽度 [Number] 可选
lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽
lineJoin: "round", //线条交汇时边角的类型 [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
canvasWidth: 700, //canvas宽高 [Number] 可选
canvasHeight: 450, //高度 [Number] 可选
isShowBorder: false, //是否显示边框 [可选]
bgColor: "#fcc", //背景色 [String] 可选
borderWidth: 1, // 网格线宽度 [Number] 可选
borderColor: "#ff787f", //网格颜色 [String] 可选
writeWidth: 5, //基础轨迹宽度 [Number] 可选
maxWriteWidth: 30, // 写字模式最大线宽 [Number] 可选
minWriteWidth: 5, // 写字模式最小线宽 [Number] 可选
writeColor: "#101010", // 轨迹颜色 [String] 可选
isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
imgType: "png" //下载的图片格式 [String] 可选为 jpeg canvas本是透明背景的
}
};
},
methods: {
/**
* 清除画板
*/
canvasClear() {
this.$refs.SignCanvas.canvasClear();
},
/**
* 保存图片
*/
saveAsImg() {
const img = this.$refs.SignCanvas.saveAsImg();
//alert(`image 的base64:${img}`);
this.$emit("update:visible", false);
},
/**
* 下载图片
*/
downloadSignImg() {
this.$refs.SignCanvas.downloadSignImg();
}
}
};
</script>
<style lang="stylus" scoped>
.sign >>> .el-dialog{
background: #b4a078;
}
.sign >>> .el-dialog__header {
padding 2px 0px
}
.sign >>> .el-dialog__body {
padding 0
}
.sign >>> .el-button{
/*font-family STXingkai*/
font-size 12px
font-weight 400
}
.btnList{
padding 5px
}
.sign >>> .el-dialog__title {
line-height: 32px;
font-size: 24px;
/*font-family STXingkai*/
color: hsl(40, 28.57% , 30.82%);
text-shadow: 0 .03em .03em black;
}
.sign-canvas {
display: block;
margin: 0 auto;
background: #f4f0ea;
border-radius: 8px;
}
</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
135
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
135
# 使用
<sign-dialog
:visible.sync="receiverSignFlag"
@change="handleReceiverSign"
></sign-dialog>
<template
v-if="getReceiver != null && getReceiver != undefined"
>
<img :src="getReceiver" width="80" height="60" />
</template>
<el-button
type="primary"
@click="handleReceiverFlag"
icon="el-icon-edit"
size="small"
style="float: right;margin-top: 15px;"
>签名</el-button
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18