canvas电子画板，适用于H5版本，组件产出为blob类型的文件流

组件代码

<template>
  <div class="signatureBox" :style="{ height: 90 + '%'}">
    <div class="canvasBox" ref="canvasHW">
      <div class="closeBox">
        <span @click="surewrite">确认</span>
        <span @click="overwrite">重写</span>
        <span @click="close">关闭</span>
      </div>
      <canvas
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
        ref="canvasF"
        @mousedown="mouseDown"
        @mousemove="mouseMove"
        @mouseup="mouseUp"
      ></canvas>
    </div>
  </div>
</template>

<script>
    import Vue from 'vue'
    import Oss from '../oss'
    export default {
      name: 'DrawBoard',
      data () {
        return {
          points: [],
          canvasTxt: null,
          startX: 0,
          startY: 0,
          moveY: 0,
          moveX: 0,
          endY: 0,
          endX: 0,
          w: null,
          h: null,
          isDown: false,
          color: '#000',
          linewidth: 3,
          isDraw: false // 签名标记
        }
      },
      mounted () {
        let canvas = this.$refs.canvasF
        canvas.height = this.$refs.canvasHW.offsetHeight - 20
        canvas.width = this.$refs.canvasHW.offsetWidth - 10
        this.canvasTxt = canvas.getContext('2d')
        this.canvasTxt.strokeStyle = this.color
        this.canvasTxt.lineWidth = this.linewidth
      },
      methods: {
        // 针对pc鼠标支持
        mouseDown (ev) {
          ev = ev || event
          ev.preventDefault()
          let obj = {
            x: ev.offsetX,
            y: ev.offsetY
          }
          this.startX = obj.x
          this.startY = obj.y
          this.canvasTxt.beginPath()
          this.points.push(obj)
          this.isDown = true
        },
        // 移动设备事件
        touchStart (ev) {
          ev = ev || event
          ev.preventDefault()
          if (ev.touches.length === 1) {
            this.isDraw = true // 签名标记
            let obj = {
              x: ev.targetTouches[0].clientX,
              y: ev.targetTouches[0].clientY - (document.body.offsetHeight * 0.1 + this.$refs.canvasHW.offsetHeight * 0.1)
            } // y的计算值中：document.body.offsetHeight*0.5代表的是除了整个画板signatureBox剩余的高，this.$refs.canvasHW.offsetHeight*0.1是画板中标题的高
            this.startX = obj.x
            this.startY = obj.y
            this.canvasTxt.beginPath()
            this.points.push(obj)
          }
        },
        // 电脑设备事件
        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.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.startY = obj.y
            this.startX = obj.x
            this.points.push(obj)
          }
        },
        // 移动设备事件
        touchMove (ev) {
          ev = ev || event
          ev.preventDefault()
          if (ev.touches.length === 1) {
            let obj = {
              x: ev.targetTouches[0].clientX,
              y: ev.targetTouches[0].clientY - (document.body.offsetHeight * 0.1 + this.$refs.canvasHW.offsetHeight * 0.1)
            }
            this.moveY = obj.y
            this.moveX = obj.x
            this.canvasTxt.moveTo(this.startX, this.startY)
            this.canvasTxt.lineTo(obj.x, obj.y)
            this.canvasTxt.stroke()
            this.startY = obj.y
            this.startX = obj.x
            this.points.push(obj)
          }
        },
        // 电脑设备事件
        mouseUp (ev) {
          ev = ev || event
          ev.preventDefault()
          let obj = {
            x: ev.offsetX,
            y: ev.offsetY
          }
          this.canvasTxt.closePath()
          this.points.push(obj)
          this.points.push({ x: -1, y: -1 })
          this.isDown = false
        },
            // 移动设备事件
        touchEnd (ev) {
          ev = ev || event
          ev.preventDefault()
          if (ev.touches.length === 1) {
            let obj = {
              x: ev.targetTouches[0].clientX,
              y: ev.targetTouches[0].clientY - (document.body.offsetHeight * 0.5 + this.$refs.canvasHW.offsetHeight * 0.1)
            }
                    // 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 })
          }
        },
       // 重写
        overwrite () {
          this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)
          this.points = []
          this.isDraw = false // 签名标记
        },
       // 关闭
        close () {
          this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)
          this.points = []
          this.$emit('update:close', false)
        },
        foo (blob) {
          // this.src = URL.createObjectURL(blob)
          console.log(blob)
          Vue.upload(null, {path: 'blobtest'}, (src, thumbnail) => {
            console.log(src, thumbnail)
            this.src = Oss.getOssFileUrl(src)
          }, null, blob)
        },
        // 确认签名
        surewrite () {
          this.$refs.canvasF.toBlob(this.foo, 'image/png', 0.5)
          if (this.isDraw) {
            alert('签名成功！')
            // this.$emit("surewrite",false);
          } else {
            alert('请签名后再确认！')
          }
        }
      }
    }
</script>

<style type="less" scoped>
  .signatureBox {
    position: fixed;
    bottom: 0px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 100;
    background: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 0 0 2px 1px #b5b3b3;
    /*display: flex;*/
    /*flex-direction: column;*/
  }
  .canvasBox {
    padding: 0px 5px;
    height: 92%;
  }
  canvas {
    background: #f2f5f9;
    border-radius: 10px;
    box-shadow: 0px 0 4px 2px #d4cfcf inset;
  }
  .btnBox {
    height: 30px;
    padding: 5px;
    text-align: center;
    line-height: 30px;
  }
  .btnBox button {
    border: 1px solid dodgerblue;
    background: dodgerblue;
    color: #fff;
    border-radius: 4px;
    padding: 2px 30px;
    margin: 0 15px;
    font-size: 14px;
  }
  .closeBox {
    text-align: center;
    height: 10%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .closeBox span {
    font-size: 15px;
    float: left;
  }
  .closeBox p {
    font-size: 22px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 30px;
    border: none;
    background: gray;
    color: white;
    float: right;
  }
</style>

使用方式

<template>
		<div>
        <draw-board v-if="drawing" :close.sync="drawing"></draw-board>
    </div>
</template>
<script>
import DrawBoard from '@/components/DrawBoard'

export default {
  components: { DrawBoard },
  data () {
    return {
      drawing: false
    }
  }
}
</script>