服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - vue使用canvas实现移动端手写签名

vue使用canvas实现移动端手写签名

2021-10-11 15:2295後开发妹纸~ JavaScript

这篇文章主要为大家详细介绍了基于vue使用canvas实现移动端手写签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

基于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;}
 }

效果图:

vue使用canvas实现移动端手写签名

就到这里吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/weixin_47679798/article/details/108695258

延伸 · 阅读

精彩推荐