canvas实现电子签名并且实时回显

canvas实现电子签名并且实时回显
效果：

<template>
  <div>
    canvas
    <canvas
     ref="canvasF"
      @mousedown="mouseDown"
      @mousemove="mouseMove"
      @mouseup="mouseUp"
      @touchStart="touchStart"
      @touchMove="touchMove"
      @touchEnd="touchEnd"
 ></canvas>

 <div v-if="canvasData">
    <img :src="canvasData" alt="">
 </div>

 <div @click="overwrite">清除重写</div>
  </div>
</template>

<script>
  export default{

    data() {
      return {
        stageInfo:'',
        imgUrl:'',
        client: {},
        points: [],
        canvasTxt: null,
        startX: 0,
        startY: 0,
        moveY: 0,
        moveX: 0,
        endY: 0,
        endX: 0,
        w: null,
        h: null,
        isDown: false,
        canvaBom:null,
        canvasData:''
      }
    },

    mounted() {
      let _this = this
      let canvas = this.$refs.canvasF
    //   测试回显用
      this.canvaBom = this.$refs.canvasF
      canvas.height = 300
      canvas.width = 400
      _this.canvasTxt = canvas.getContext('2d')//canvas的初始化
      _this.stageInfo = canvas.getBoundingClientRect() //getBoundingClientRect()可以不用考虑兼容性
    },

    methods: {
    //mobile端
    touchStart(ev) {
        ev = ev || event
        ev.preventDefault()
        if (ev.touches.length == 1) {
        let obj = {
        x: ev.targetTouches[0].clienX,
        y: ev.targetTouches[0].clientY,
        }
        this.startX = obj.x
        this.startY = obj.y
        this.canvasTxt.beginPath()
        this.canvasTxt.moveTo(this.startX, this.startY)
        this.canvasTxt.lineTo(obj.x, obj.y)
        this.canvasTxt.stroke()
        this.canvasTxt.closePath()
        this.points.push(obj)
        }
    },
    touchMove(ev) {
        ev = ev || event
        ev.preventDefault()
        if (ev.touches.length == 1) {
            let obj = {
            x: ev.targetTouches[0].clientX - this.stageInfo.left,
            y: ev.targetTouches[0].clientY - this.stageInfo.top
            }
            this.moveY = obj.y
            this.moveX = obj.x
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.startY = obj.y
            this.startX = obj.x
            this.points.push(obj)
        }
    },
    touchEnd(ev) {
        ev = ev || event
        ev.preventDefault()
        if (ev.touches.length == 1) {
            let obj = {
            x: ev.targetTouches[0].clientX - this.stageInfo.left,
            y: ev.targetTouches[0].clientY - this.stageInfo.top
            }
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.points.push(obj)
        }
    },
    //pc端
    mouseDown(ev) {
        ev = ev || event
        ev.preventDefault()
        // if (1) {
            let obj = {
                x: ev.offsetX,
                y: ev.offsetY
            }
            this.startX = obj.x
            this.startY = obj.y
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.points.push(obj)
            this.isDown = true
        // }
    },
    mouseMove(ev) {
        ev = ev || event
        ev.preventDefault()
        if (this.isDown) {
            let obj = {
                x: ev.offsetX,
                y: ev.offsetY
            }
            this.moveY = obj.y
            this.moveX = obj.x
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.startY = obj.y
            this.startX = obj.x
            this.points.push(obj)

            this.hauhuadebabybaby()
        }
    },
    mouseUp(ev) {
        ev = ev || event
        ev.preventDefault()
        // if (1) {
            let obj = {
                x: ev.offsetX,
                y: ev.offsetY
            }
            this.canvasTxt.beginPath()
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.canvasTxt.closePath()
            this.points.push(obj)
            this.points.push({x: -1, y: -1})
            this.isDown = false
    },

	//最重要，实时改变图片
    hauhuadebabybaby(){
        let dataURL = this.canvaBom.toDataURL();
        var image = new Image();
        image.src = dataURL
        this.canvasData = dataURL;
    },

    //清除重写
    overwrite() {
        this.canvasTxt.clearRect(0, 0, this.canvaBom.width,this.canvaBom.width, this.canvaBom.width,this.canvaBom.height)
        this.points = []
        this.canvasData = ''
    },
  },
}
</script>