基于vue使用canvas实现移动端手写签名！
之前自己开发有这么一个需求，需要实现手写签名，然后以图片的形式保存生成图片的base64数据流 。自己在网上找了一堆，都不是很完美。然后参考网上的加自己的优化和修改做了一版。希望有需要的朋友可以拿来直接用。
HTML部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<template>
<div class="hello" >
<div>请输入您的签名7：</div>
<canvas id="canvas" ref="canvasW" width="373" height="200" style="border:1px solid black" >Canvas画板</canvas>
<img v-bind:src="url" alt="">
<div>
<button type="" v-on:click="clear">重写</button>
<button v-on:click="save">保存签名</button>
</div>
</div>
</template>
|
为了节约时间，样式写的比较简单。凑合看吧！
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
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
|
<script>
var draw;
var preHandler = function(e){e.preventDefault();}
class Draw {
constructor(el) {
this.el = el
this.canvas = document.getElementById(this.el)
this.cxt = this.canvas.getContext('2d')
this.stage_info = canvas.getBoundingClientRect()
this.path = {
beginX: 0,
beginY: 0,
endX: 0,
endY: 0
}
}
init(btn) {
var that = this;
//初始化生成
this.canvas.addEventListener('touchstart', function(event) {
document.addEventListener('touchstart', preHandler, false);
that.drawBegin(event)
})
this.canvas.addEventListener('touchend', function(event) {
document.addEventListener('touchend', preHandler, false);
that.drawEnd()
})
this.clear(btn)
}
drawBegin(e) {
var that = this;
window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty()
this.cxt.strokeStyle = "#000"
this.cxt.beginPath()
this.cxt.moveTo(
e.changedTouches[0].clientX - this.stage_info.left,
e.changedTouches[0].clientY - this.stage_info.top
)
this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left
this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top
canvas.addEventListener("touchmove",function(ev){
ev.preventDefault()
that.drawing(event)
})
}
drawing(e) {
this.cxt.lineTo(
e.changedTouches[0].clientX - this.stage_info.left,
e.changedTouches[0].clientY - this.stage_info.top
)
this.path.endX = e.changedTouches[0].clientX - this.stage_info.left
this.path.endY = e.changedTouches[0].clientY - this.stage_info.top
this.cxt.stroke()
}
drawEnd() {
document.removeEventListener('touchstart', preHandler, false);
document.removeEventListener('touchend', preHandler, false);
document.removeEventListener('touchmove', preHandler, false);
}
clear(btn) {
this.cxt.clearRect(0, 0, this.stage_info.width, this.stage_info.height)
// this.cxt.clearRect(0, 0, 373, 200)
}
save(){
return canvas.toDataURL("image/png")
console.log(canvas.toDataURL("image/png"))
}
}
export default {
data () {
return {
msg: '啦啦啦',
val:true,
url:""
}
},
mounted() {
draw=new Draw('canvas');
draw.init();
},
methods:{
clear:function(){
draw.clear();
// 用于点击清除画布时，同时清除上次保存的图片
this.save()
},
save:function(){
var data=draw.save();
this.url = data;
// 生成图片的base64数据流
},
mutate(word){
this.$emit("input", word);
},
}
}
</script>
|
css部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<style scoped lang="less">
.hello{
height: 100%;
width: 100%;
background: #ccc;
h1, h2 { font-weight: normal; }
ul { list-style-type: none; padding: 0; }
li { display: inline-block; margin: 0 10px; }
a { color: #42b983; }
#canvas { background: pink; cursor: default; }
#keyword-box { margin: 10px 0; }
button{font-size: 0.2rem;color: blue;}
}
|
效果图：
就到这里吧！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_47679798/article/details/108695258