# SIFU
这个博主有点懒，首页暂时没有什么可看的~
如果网站内容对您有一定帮助，就请作者喝杯咖啡吧~
<template>
<div>
<h1>签字画板</h1>
<div>
画笔粗细：
<select v-model="lineWidth">
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
</select>
画笔颜色：
<input type="color" v-model="lineColor"></input>
画布背景:
<input type="color" v-model="bgColor"></input>
是否裁剪：
<input type="checkbox" v-model="isCrop"></input>
</div>
<br/>
<vue-esign
style="border: 1px solid #82848a;"
ref="esign"
:width="800"
:height="300"
:isCrop="isCrop"
:lineWidth="lineWidth"
:lineColor="lineColor"
:bgColor.sync="bgColor"
/>
<br/>
<button @click="handleReset">清空画板</button>
<button @click="handleGenerate">生成图片</button>
<br/>
<img :src="resultImg"/>
</div>
</template>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
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
<script>
// https://github.com/JaimeCheng/vue-esign canvas手写签字 电子签名
import VueEsign from 'vue-esign'
export default {
name: "vue-demo",
components:{
VueEsign
},
data () {
return {
lineWidth: 6,
lineColor: '#000000',
bgColor: '#ffffff',
resultImg: '',
isCrop: false
}
},
methods: {
handleReset () {
this.$refs.esign.reset()
this.bgColor = '#ffffff'
},
handleGenerate () {
this.$refs.esign.generate().then(res => {
this.resultImg = res
}).catch(err => {
alert(err) // 画布没有签字时会执行这里 'Not Signned'
})
}
}
}
</script>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
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
<style scoped>
</style>1
2
2
签字画板
画笔粗细：
画笔颜色：
画布背景:
是否裁剪：