基于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 ; h 1 , h 2 { 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.2 rem; color : blue ;} } |
效果图:
就到这里吧!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/weixin_47679798/article/details/108695258