微信小程序签字功能

<view>
  <view class="popcont">
      <view class="wricont">
        <canvas class="canvastyle" type="2d"  id='canvasId' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas>
      </view>
      <view class="writebox" >
        <button type="info" custom-class="cusstyle" plain round bindtap="clear">清除</button>
        <view style="width: 60rpx;"></view>
        <button type="info" custom-class="cusstyle" style="background-color: #404EDA; color: white;" round bindtap="export">确认签字</button>
      </view>
    </view>
</view>

const util = require('../../../../utils/util')
const req = require('../../../../interface/mineInterface')
const app = getApp()

Page({
  data: {
    flagMove:false,//默认未签名
    context:null,
    gid:'',
    canvas:''

  },
  onLoad: function (options) {
    this.setData({
      gid:options.gid
    })
    // 通过 SelectorQuery 获取 Canvas 节点
    wx.createSelectorQuery()
      .select('#canvasId')
      .fields({
        node: true,
        size: true,
      })
      .exec(this.init.bind(this))
  },
  init(res){
    const width = res[0].width
    const height = res[0].height

    const canvas = res[0].node
    const ctx = canvas.getContext('2d')

    const dpr = wx.getSystemInfoSync().pixelRatio
    canvas.width = width * dpr
    canvas.height = height * dpr
    ctx.scale(dpr, dpr)

    this.setData({
      context: ctx,
      canvas:canvas
    })


  },
  bindtouchstart(e) {
    this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
  },
  // 触摸移动
  bindtouchmove(e) {
    this.setData({
      flagMove:true,
    })
    this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
    this.data.context.stroke();
    // this.data.context.draw(true);
    this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
  },
  /**清空画布 */
  clear() {
    this.data.context.beginPath();
    this.data.context.clearRect(0, 0, 600, 700);//清空画布
    this.data.context.stroke();
    // this.data.context.draw();
    this.setData({
      flagMove:false,
    })
  },
  /**导出图片 */
 export() {
    const that = this;
    if(!that.data.flagMove){
      console.log('签名获取失败，请稍后重试');
      return;
    }
  wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    fileType: 'png',
    canvasId: 'canvasId',
    canvas:this.data.canvas,
    success:res=> {
      const { tempFilePath } = res;
      console.log('手写签名，签字图片',tempFilePath)
      this.upload(tempFilePath)
    },
    fail() {
      wx.showToast({
        title: '签名提交失败',
        icon: 'none',
        duration: 2000
      })
    }
  })
  },


  //上传文件
  upload(img){
        let data={
          filePath:img,
          gid:this.data.gid
        }
        req
          .imgUpload(data)
          .then(res=>{
            if(res.data.code==1000){
              wx.showModal({
                confirmColor: util.changeColor(0),
                showCancel: false,
                content: '上传成功!',
                success:res=>{
                 wx.navigateBack()
                }
              })
            }
          })
  },
})