vue 簽名 - 簡書

<template>
  <div ref="signaturePanel" class="signaturePanel">
    <div  class="title" ref="title"  @click="clearAll">請?jiān)谙路絽^(qū)域簽字</div>
    <canvas ref="drawingBoard" class="drawingBoard" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup" v-show="!mySignature"></canvas>
    <img class="drawingBoard" :src="mySignature" v-show="mySignature"/>
    <div class="clear" @click="clearAll"><img src="../img/clear.png"/>{{mySignature ? '重新簽名':'清除'}}</div>
    <!-- <div class="nextBtn validate" @click="clearAll">提交</div> -->
    <!-- <input type="file" ref="textDom"/> -->
  </div>
</template>
<script>
import {uploadShareImages} from '../api/api'
export default {
  props: {
    signature: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      canvas: '',
      ctx: '',
      painting: false,
      lastPoint: {
        x: undefined,
        y: undefined
      },
      lineWidth: 2, // 畫筆寬度
      color: '#000', // 畫筆顏色
      mySignature: this.signature
      // width: 0, // 畫布寬度
      // height: 0 // 畫布高度
    }
  },
  watch: {
    signature(val) {
      this.mySignature = val
    }
  },
  mounted () {
    tuhu.store.commit('shopJoin/setPageIndex', 9)
    this.init()
    $(document).off('click', 'a') // 恢復(fù)a標(biāo)簽的默認(rèn)事件
  },
  created() {
  },
  methods: {
    onPageBack() {
      // 監(jiān)聽頁面返回
      tuhu.store.commit('shopJoin/setPageIndex', 9)
    },
    init () {
      this.ctx = this.$refs.drawingBoard.getContext('2d')
      this.$refs.drawingBoard.width = this.$refs.drawingBoard.offsetWidth
      this.$refs.drawingBoard.height = this.$refs.drawingBoard.offsetHeight
      this.ctx.strokeStyle = this.color
      // 在canvas繪制前填充白色背景,不然保存的png圖片是透明的
      this.ctx.fillStyle = '#fff'
      this.ctx.fillRect(0, 0, this.$refs.drawingBoard.offsetWidth, this.$refs.drawingBoard.offsetHeight)

      const _this = this
      // 兼容移動端
      if (document.body && document.body.ontouchstart !== undefined) {
        _this.$refs.drawingBoard.ontouchstart = function (e) {
          _this.mousedown(e, 0)
          e.preventDefault()
        }
        _this.$refs.drawingBoard.ontouchmove = function (e) {
          _this.mousemove(e, 0)
        }
        _this.$refs.drawingBoard.ontouchend = function (e) {
          _this.mouseup(e, 0)
        }
      }
    },
    mousedown (e, flag = 1) {
      this.painting = true
      this.lastPoint = this.getPoint(e, flag)
    },
    mousemove (e, flag = 1) {
      if (!this.painting) {
        return
      }
      let newPoint = this.getPoint(e, flag)
      this.drawLine(this.lastPoint.x, this.lastPoint.y, newPoint.x, newPoint.y)
      this.lastPoint = newPoint
    },
    getPoint(e, flag = 1) {
      let x
      let y
      try {
        let clientY = flag ? e.clientY : e.touches[0].clientY
        x = flag ? e.offsetX : e.touches[0].clientX
        y = clientY - this.$refs.title.offsetHeight - this.$refs.signaturePanel.offsetTop + this.$refs.signaturePanel.offsetParent.scrollTop
      } catch (error) {
        tuhu.alert(error)
      }

      return {x: x, y: y}
    },
    mouseup () {
      this.painting = false
    },
    drawLine (x1, y1, x2, y2) {
      this.ctx.lineWidth = this.lineWidth
      this.ctx.lineCap = 'round'
      this.ctx.lineJoin = 'round'
      this.ctx.moveTo(x1, y1)
      this.ctx.lineTo(x2, y2)
      this.ctx.stroke()
      this.ctx.closePath()
    },
    clearAll () {
      if (this.mySignature) {
        this.mySignature = ''
        this.$nextTick(() => {
          this.init()
        })
      } else {
          // this.ctx.height = this.$refs.drawingBoard.offsetHeight
        this.ctx.clearRect(0, 0, this.$refs.drawingBoard.offsetWidth, this.$refs.drawingBoard.offsetHeight)
        this.ctx.beginPath()   // 開啟新路徑，防止連筆
          // 清除以后要重新繪制背景圖
        this.ctx.fillStyle = '#fff'
        this.ctx.fillRect(0, 0, this.$refs.drawingBoard.offsetWidth, this.$refs.drawingBoard.offsetHeight)
      }
    },
    convertBase64UrlToBlob(urlData) {
      let bytes = window.atob(urlData.split(',')[1])        // 去掉url的頭氢伟，并轉(zhuǎn)換為byte
        // 處理異常,將ascii碼小于0的轉(zhuǎn)換為大于0
      let ab = new ArrayBuffer(bytes.length)
      let ia = new Uint8Array(ab)
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i)
      }
      return new Blob([ab], {type: 'image/png'})
    },
    save () { // 當(dāng)前項(xiàng)目阻止了a標(biāo)簽的默認(rèn)事件
      if (this.mySignature) {
        return this.mySignature
      }
      let imgUrl = ''
      try {
        imgUrl = this.$refs.drawingBoard.toDataURL('image/png')
      } catch (error) {
        tuhu.alert(error)
        tuhu.alert('請清除簽名后浪南，重新簽名')
      }
      let formData = new FormData()
      // console.log(this.$refs.textDom.files[0])
      // formData.append('img', this.$refs.textDom.files[0])
      formData.append('imageName', this.convertBase64UrlToBlob(imgUrl))
      return uploadShareImages(formData)
        .then((res) => {
          tuhu.hidePreloader()
          return res && res.filename
        }).catch((e) => {
          tuhu.hidePreloader()
          tuhu.toast('簽名上傳失敗,請重新上傳')
          return ''
        })
    }
  }
}
</script>
<style lang="less" scoped>
  .signaturePanel {
    // overflow: hidden;
    font-size: 14px;
    background: #fff;
    padding-bottom: 2.25rem;
    position: relative;
    &::after{
      width: 100%;
      content: '簽字區(qū)';
      position: absolute;
      top: 50% - 1rem;
      left: 0;
      font-size: 3rem;
      text-align: center;
      transform: translateY(-50%);
      color: #F5F5F5;
      z-index: -1;
    }
    .title{
      height: 2rem;
      padding: .6rem 0 .3rem .75rem;
      color: #999;
      font-weight: 400;
    }
    .drawingBoard {
      width: 100%;
      height: 12rem;
      border: 1px solid #eee;
    }
    .clear {
      height: 1.4rem;
      line-height: 1.4rem;
      color: #666;
      background: #F5F5F5;
      border-radius: .7rem;
      padding: 0 .5rem;
      position: absolute;
      bottom: .7rem;
      right: .7rem;
      z-index: 99;
      text-align: center;
      vertical-align: top;
      img{
        width: .7rem;
        height: .7rem;
        margin-right: .1rem;
        transform: translateY(.1rem)
      }
    }
    // .save {
    //   background-color: #f00;
    //   position: absolute;
    //   top: 0;
    //   right: 0;
    //   z-index: 1;
    // }
  }
</style>