微信小程序手写签名

write.html

<view>
  <view class="popcont">
      <view class="wricont">
        <canvas class="canvastyle" canvas-id="canvasId" id='canvasId' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas>
      </view>
      <view class="writebox">
        <van-button type="info" custom-class="cusstyle" plain round bindtap="clear">重写</van-button>
        <van-button type="info" custom-class="cusstyle" round bindtap="export">确认</van-button>
      </view>
    </view>
</view>

write.js

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

  },
  onLoad: function (options) {
    let context = wx.createCanvasContext('canvasId')
    this.setData({
      context: context
    })
    context.draw();
  },
  bindtouchstart(e) {
    console.log("bindtouchstart", e);
    this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
  },
  // 触摸移动
  bindtouchmove(e) {
    console.log("bindtouchstart", 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.clearRect(0, 0, 600, 700);//清空画布
    this.data.context.draw();
    this.setData({
      flagMove:false
    })
  },
  /**导出图片 */
 export() {
    const that = this;
    if(!that.data.flagMove){
      console.log('签名获取失败，请稍后重试');
      return;
    }
  that.data.context.draw(true, wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    fileType: 'jpg',
    canvasId: 'canvasId',
    success(res) {
      const { tempFilePath } = res;
      console.log('手写签名，签字图片',tempFilePath)
    },
    fail() {
      showToast('签名提交失败');
    }
  }))
  },
})

write.css

.wricont{
  width:100%;
  height:800rpx;
}
.canvastyle{
  height:100%;
  width:100%;
  background-color: #f5f5f5;
}
.writebox{
  padding:50rpx 50rpx 30rpx;
  display:flex;
  justify-content: space-between;
}
.cusstyle{
  width:200rpx;
}

write.json

{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  },
  "disableScroll": true //手写时如果上下滑动，则设置此项为true
}