【第15期】vue: 电子签名

原创文章，转载请注明原文章地址，谢谢！

这里演示如何在webapp中签名。

1. Autograph.vue电子签名

<template>
  <div class="hello">
    <canvas id ="canvas" style="background-color: #fff" @touchmove.prevent>Canvas画板</canvas>
    <div class="btnBox">
      <button @click="clear">清除</button>
      <button @click="save">确定</button>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  var draw
  var isDraw = 0
  var preHandler = function (e) {
    e.preventDefault()
  }
class Draw {
  constructor (el) {
    this.el = el
    this.canvas = document.getElementById('canvas')
    this.cxt = this.canvas.getContext('2d')
    this.stage_info = this.canvas.getBoundingClientRect()
    this.path = {
      beginX: 0,
      beginY: 0,
      endX: 0,
      endY: 0
    }
    isDraw = 0
    this.canvas.width = document.body.clientWidth
    this.canvas.height = document.body.clientHeight
    alert('请用真实姓名签名')
  }
  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.fillStyle = '#FFF'
    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
    this.canvas.addEventListener('touchmove', function () {
      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()
    isDraw = isDraw + 1
  }
  drawEnd () {
    document.removeEventListener('touchstart', preHandler, false)
    document.removeEventListener('touchend', preHandler, false)
    document.removeEventListener('touchmove', preHandler, false)
  }
  clear (btn) {
    this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height)
  }
  save () {
    let imgBase64 = this.canvas.toDataURL()
    return imgBase64
  }
}
​
export default {
  data () {
    return {
      msg: '',
      val: true,
      url: ''
    }
  },
  mounted () {
    draw = new Draw('canvas')
    draw.init()
  },
  computed: {
    ...mapState(['autographButton', 'autographImg'])
  },
  methods: {
    clear: function () {
      draw.clear()
      isDraw = 0
    },
    save: function () {
      if (isDraw > 50) {
        let data = draw.save()
        this.url = data
        this.$router.go(-1)
        let value = 'true'
        sessionStorage.setItem('true', value)
        sessionStorage.setItem('autoimg', data)
        this.$store.state.autographButton = '签名完成'
        this.$store.state.autographImg = '签名完成'
        console.log(this.$store.state.autographButton + '-----' + '签名已完成')
      } else {
        alert('请签名后在提交')
      }
    }
  }
}
</script>
​
<style scoped>
#canvas {
  cursor: default;
}
.btnBox{
    width: 100%;
    height: 120px;
    background: #EEEEEE;
    position: fixed;
    bottom: 0;
  }
  .btnBox button:first-of-type{
    border: none;
    background: transparent;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 32px;
    outline: none;
    color: #F00000;
    float: left;
    margin-left: 98px;
    line-height: 120px;
    transform: rotate(90deg);
  }
  .btnBox button:last-of-type{
    border: none;
    background: transparent;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 32px;
    outline: none;
    color: #1CAC3E;
    float: right;
    margin-right: 98px;
    line-height: 120px;
    transform: rotate(90deg);
  }
</style>
​

2. 签名演示