uniapp小程序实现横屏手写签名

<template>
  <view class="signBox column-me">
    <!-- 这个是自定义的title-可根据自己封装的title的作为调整 -->
    <status-bar title="电子签名" :bgColor="null"></status-bar>
    <view class="topHint">请绘制清晰可辨的签名并保存</view>
    <canvas class="canvas flex1" :canvas-id="cid" :id="cid" @touchstart="touchstart" @touchmove="touchmove"
      @touchend="touchend" :disable-scroll="true"></canvas>
    <view class="btn margin-top10 margin-bottom10">
      <view class="cancelBtn" @click="reWrite">重写</view>
      <view class="saveBtn margin-left30" @click="save">保存</view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        line: [],
        radius: 0,
        taskId: '',
        //以下与签名有关参数
        dom: null,
        cid: 'canvas', //画布id
        Strokes: [],
        showCanvasDialog: false,
        canvasImg: '', //签名图片
      }
    },
    onLoad(e) {
      this.taskId = e.taskId
    },
    computed: {},
    mounted: function() {
      let that = this
      this.initCanvas()
    },
    methods: {
      initCanvas() {
        let that = this
        this.$nextTick(function() {
          this.dom = uni.createCanvasContext(this.cid, this);
          var query = wx.createSelectorQuery();
          query.select('#canvas').boundingClientRect();
          query.exec(function(res) {
            let widths = res[0].width
            let heights = res[0].height
            that.dom.rect(0, 0, widths, heights)
            that.dom.setFillStyle('#FFFFFF')
            that.dom.fill()
            that.dom.draw()
          })
        });
      },
      touchstart(e) {
        this.Strokes.push({
          imageData: null,
          style: {
            color: '#000000',
            lineWidth: '3',
          },
          points: [{
            x: e.touches[0].x,
            y: e.touches[0].y,
            type: e.type,
          }]
        })
        this.drawLine(this.Strokes[this.Strokes.length - 1], e.type);
      },
      touchmove(e) {
        this.Strokes[this.Strokes.length - 1].points.push({
          x: e.touches[0].x,
          y: e.touches[0].y,
          type: e.type,
        })
        this.drawLine(this.Strokes[this.Strokes.length - 1], e.type);
      },
      touchend(e) {
        if (this.Strokes[this.Strokes.length - 1].points.length < 2) { //当此路径只有一个点的时候
          this.Strokes.pop();
        }
      },
      drawLine(StrokesItem, type) {
        if (StrokesItem.points.length > 1) {
          this.dom.setLineCap('round')
          this.dom.setStrokeStyle(StrokesItem.style.color);
          this.dom.setLineWidth(StrokesItem.style.lineWidth);
          this.dom.moveTo(StrokesItem.points[StrokesItem.points.length - 2].x, StrokesItem.points[StrokesItem
            .points.length -
            2].y);
          this.dom.lineTo(StrokesItem.points[StrokesItem.points.length - 1].x, StrokesItem.points[StrokesItem
            .points.length -
            1].y);
          this.dom.stroke();
          this.dom.draw(true);
        }
      },
      //重写签名
      reWrite() {
        this.Strokes = [];
        this.dom.draw();
        this.initCanvas()
      },
      // 保存图片
      save() {
        let that = this
        uni.canvasToTempFilePath({
          canvasId: 'canvas',
          fileType: 'png',
          quality: 1, //图片质量
          success: function(res) {
            let imgs = [res.tempFilePath]
            that.$.upload_img(imgs, 0, res => {
              let imgUrl = res.data //签名图片
              let mediaUrl = that.$.get_data('mediaUrl') //采集图片
              if (that.$.isEmpty(mediaUrl)) {
                mediaUrl = ''
              }
              that.$.ajax("POST", "/customer/user/checkTask", {
                taskId: that.taskId,
                status: 1, //状态：1同意2拒绝  
                signImage: imgUrl,
                userVideo: mediaUrl,
              }, (res) => {
                if (res.code === 1000) {
                  that.$.ti_shi(res.message)
                  setTimeout(() => {
                    uni.$emit('signOk')
                    that.$.back()
                  }, 1000)
                } else {
                  that.$.ti_shi(res.message)
                }
              });
            })
          },
          fail(e) {
            console.log(e)
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .signBox {
    position: relative;
    overflow: hidden;
    background-color: #F6F6F6;
    height: 100vh;
    width: 100vw;

    .canvas {
      width: 100%;
      background: #FFFFFF;
    }

    .topHint {
      width: 100%;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 28rpx;
      color: #6D7984;
      text-align: center;
      background: ;
    }

    .btn {
      width: 100%;
      height: 132rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .saveBtn {
        width: 300rpx;
        height: 88rpx;
        line-height: 88rpx;
        background: #215AA0;
        border-radius: 20rpx;
        text-align: center;
        font-size: 32rpx;
        color: #FFFFFF;
      }

      .cancelBtn {
        width: 298rpx;
        height: 86rpx;
        line-height: 86rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        text-align: center;
        font-size: 32rpx;
        color: #202233;
        border: 1px solid #BBC4CC;
      }
    }
  }
</style>