canvas签名

<template>
    <div class="share" style="background:#fff">
        <div class="zk-title">
          请工整的书写 <span style="color:#06F;">独孤求败</span> 的签字
        </div>
        <!-- <div style="width:100px;height:100px"><img src="" width="40px" height="40px" id="test"/>88</div> -->
        <div class="canvasBox" ref="canvasHW">
            <canvas @touchstart='touchStart'
                    @touchmove='touchMove'
                    @touchend='touchEnd'
                    @mousedown="mouseDown"
                    @mousemove="mouseMove"
                    @mouseup="mouseUp"
                    ref="canvasF">
            </canvas>
        </div>
        <div class="btnBox">
            <button class="clear" @click="overwrite">清除</button>
            <button class="confirm" @click="commit">确认</button>
            <button class="cancel" @click="cancel">取消</button>
        </div>
    </div>
</template>
<script>
export default {
  name: 'signature',
  data () {
    return {
      points: [],
      startX: 0,
      startY: 0,
      moveY: 0,
      moveX: 0,
      endY: 0,
      endX: 0,
      w: null,
      h: null,
      imgData: '',
      isDown: false,
      canvasBoard: null,
      canvasContext: null
    }
  },
  mounted () {
    this.canvasBoard = this.$refs.canvasF;
    this.canvasBoard.height = this.$refs.canvasHW.offsetHeight;
    this.canvasBoard.width = this.$refs.canvasHW.offsetWidth;
    var ctx = this.canvasBoard.getContext('2d');
    this.canvasContext = ctx;
    ctx.lineWidth=3;
    ctx.font = "Arial";
  },

  methods: {
      back(){

      },
    // Computer event -- Mouse down
    mouseDown (ev) {
      ev = ev || event
      ev.preventDefault()
      console.log(ev)

      let obj = {
        x: ev.offsetX,
        y: ev.offsetY
      }

      console.log(obj)
      this.startX = obj.x
      this.startY = obj.y
      this.canvasContext.beginPath()
      this.canvasContext.moveTo(this.startX, this.startY)
      this.canvasContext.lineTo(obj.x, obj.y)
      this.canvasContext.stroke()
      this.canvasContext.closePath()
      this.points.push(obj)
      this.isDown = true
    },

    // Mobile event -- Touch start
    touchStart (ev) {
      ev = ev || event
      ev.preventDefault()
      if (ev.touches.length === 1) {
        let obj = {
          x: ev.targetTouches[0].clientX,
          y: ev.targetTouches[0].clientY - 0//0为y轴的偏移量
        }

        this.startX = obj.x
        this.startY = obj.y
        this.canvasContext.beginPath()
        this.canvasContext.moveTo(this.startX, this.startY)
        this.canvasContext.lineTo(obj.x, obj.y)
        this.canvasContext.stroke()
        this.canvasContext.closePath()
        this.points.push(obj)
      }
    },

    // Mobile -- Mouse move
    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.canvasContext.beginPath()
        this.canvasContext.moveTo(this.startX, this.startY)
        this.canvasContext.lineTo(obj.x, obj.y)
        this.canvasContext.stroke()
        this.canvasContext.closePath()
        this.startY = obj.y
        this.startX = obj.x
        this.points.push(obj)
      }
    },

    // Mobile event -- Touch move
    touchMove (ev) {
      ev = ev || event
      ev.preventDefault()
      if (ev.touches.length === 1) {
        let obj = {
          x: ev.targetTouches[0].clientX,
          y: ev.targetTouches[0].clientY - 0
        }

        this.moveY = obj.y
        this.moveX = obj.x
        this.canvasContext.beginPath()
        this.canvasContext.moveTo(this.startX, this.startY)
        this.canvasContext.lineTo(obj.x, obj.y)
        this.canvasContext.stroke()
        this.canvasContext.closePath()
        this.startY = obj.y
        this.startX = obj.x
        this.points.push(obj)
      }
    },

    // Computer event -- Mouse up
    mouseUp (ev) {
      ev = ev || event
      ev.preventDefault()

      let obj = {
        x: ev.offsetX,
        y: ev.offsetY
      }

      this.canvasContext.beginPath()
      this.canvasContext.moveTo(this.startX, this.startY)
      this.canvasContext.lineTo(obj.x, obj.y)
      this.canvasContext.stroke()
      this.canvasContext.closePath()
      this.points.push(obj)
      this.points.push({x: -1, y: -1})
      this.isDown = false
    },

    // Mobile event TouchEnd
    touchEnd (ev) {
      ev = ev || event
      ev.preventDefault()
      console.log(ev)
      if (ev.touches.length === 1) {
        let obj = {
          x: ev.targetTouches[0].clientX,
          y: ev.targetTouches[0].clientY - 0
        }

        this.canvasContext.beginPath()
        this.canvasContext.moveTo(this.startX, this.startY)
        this.canvasContext.lineTo(obj.x, obj.y)
        this.canvasContext.stroke()
        this.canvasContext.closePath()
        this.points.push(obj)
        this.points.push({x: -1, y: -1})
      }
    },

    // Over write
    overwrite () {
      // this.canvasBoard.height
      // this.canvasBoard.width
      this.canvasContext.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height);
      this.points = [];
    },

    // Commit
    commit () {
      // this.$refs.mySignature.src = this.$refs.canvasF.toDataURL('image/png')
      //this.$store.state.currentSignatureData = this.$refs.canvasF.toDataURL('image/png');
      var imgdata = this.$refs.canvasF.toDataURL('image/png');
      // var vertical = true;
      // var imgdata = signaturePad.toDataURL(); // base64
      //alert(Vertical);
      // this.upload(imgdata, Vertical);
      // 当Vertical为true的时候，后台需要转90度；
      // 当Vertical为false的时候，后台不需要转；
      document.getElementById('test').src=imgdata;
      this.$router.back();
    },
     upload(imgdata, vertical) {
        // $("#clearButton,#backBtn,#subBtn").hide();
        //alert("v:"+vertical);
        $.ajax({
          type : 'POST',
          dataType : 'json',
          url : $("#url").val(),
          data : {
            media : imgdata,
            v : vertical,
            res_code:$("#resCode").val(),
            clientId:$("#clientId").val()

          },
          success : function(data) {

            if (data['error'] != null) {
              alert(data['error']);
              $("#clearButton,#backBtn,#subBtn").show();
              $("#msg").hide();
            } else {

              if (data.url!=null)
                location.href = data.url;
              else
                {
                $("#msg").hide();
                alert("签署成功");
                }
            }

          },
          error : function() {
            alert("错误：" + error);
            $("#clearButton,#backBtn,#subBtn").show();
            $("#msg").hide();
          }
        });
      },
    cancel(){
      this.$router.back();
    }
  }
}
</script>
<style lang="stylus" scoped>
 .share
    position absolute
    top 0
    bottom 0
    left 0
    right 0
    z-index 15
    background #fff

</style>

<style scoped>
  .signatureBox{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    z-index: 100;
    display: flex;
    flex-direction: column;
  }

  .visaDetailTop p{
    margin: 0;
    text-align: center;
    color: #000;
    font-size: 1em;
    position: relative;
  }

  .visaDetailTop p span{
    color: #fff;
    font-size: 1.2em;
  }

  .visaDetailTop p:first-of-type{
    float: left;
  }

  .visaDetailTop p:nth-of-type(2){
    float: right;
  }

  .canvasBox{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    flex: 1;
    font-family: 'Helvetica, Sans-Serif';
    font-size: 16px;
  }

  .btnBox{
    height: 30px;
    padding: 5px;
    text-align: right;
    line-height: 30px;
  }
  .btnBox button{
    border: 1px solid lightgray;
    color: #fff;
    border-radius: 4px;
    padding: 5px 10px;
    width: 60px;
    outline:none;
  }
.zk-title {
    position: absolute;
    right: -85px;
    top: 85px;
    font-size: 16px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.btnBox {
    position: absolute;
    left: -68px;
    bottom: 90px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.btnBox .clear{
  background: #808080;
}
.btnBox .confirm{
  background: #04BE02;
}
.btnBox .cancel{
  background: #39F;
}
  @media only screen and (min-width: 750px){
    .signatureBox{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      min-height: 100%;
      box-sizing: border-box;
      overflow: visible;
    }
  }
</style>