小程序端签名

效果图

image.png

① wxml中：
ps：这里的van-dialog是使用了vant-webapp中的van-dialog,可以不用这个也行

<!-- <van-dialog id="van-dialog" /> -->
<van-dialog use-slot title="确认报名表" show="{{ showBmbDialog }}" show-cancel-button bind:cancel="cancelPop" bind:close="cancelPop" bind:confirm="saveSign">
  <rich-text class="sm-title" nodes="{{sureFormTxt}}" style="margin:0px;"></rich-text>
  <view class="btn" wx:if="{{openTable}}">
    <text style="font-size:14px;">报名表:</text>
    <van-button slot="button" style="float:right;margin-top: -3px;" size="small" plain hairline type="primary" bind:click="openFile" data-src="{{imgPath+filePath}}">点击预览报名表</van-button>
  </view>
  <view class="com-title">
    请在以下空白区签名
    <view class="delete-sign" bindtap="cleardraw">重签</view>
  </view>
  <!-- 签名画布 -->
  <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback" style="background-color:#FFF;">
  </canvas>
</van-dialog>

js中

 onLoad: function(options) {
    _self = this;
    _self.indexState(-1);
    //获取报名表签字前的描述
    _self.sureFormInto();

    // 使用 wx.createContext 获取绘图上下文 context
    context = wx.createCanvasContext('canvas');
  },
  //开始
  canvasStart: function(event) {
    isButtonDown = true;
    arrz.push(0);
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
  },
  //过程
  canvasMove: function(event) {
    if (isButtonDown) {
      arrz.push(1);
      arrx.push(event.changedTouches[0].x);
      arry.push(event.changedTouches[0].y);
    };

    for (var i = 0; i < arrx.length; i++) {
      if (arrz[i] == 0) {
        context.moveTo(arrx[i], arry[i])
      } else {
        context.lineTo(arrx[i], arry[i])
      };

    };
    context.clearRect(0, 0, canvasw, canvash);
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    context.stroke();

    //context.draw(false);
    //绘制图片
    context.draw(false, wx.canvasToTempFilePath({
      canvasId: 'canvas',
      success: function (res) {
        var tempFilePath = res.tempFilePath;
          //当时安卓手机生成图片出不来 加上这个就好了
        _self.setData({
          signatureImg: tempFilePath
        });
      },
      fail: function (res) {
        console.log(res);
      }
    }));
  },
  canvasEnd: function(event) {
    isButtonDown = false;
  },
  cleardraw: function() {
    //清除画布
    arrx = [];
    arry = [];
    arrz = [];
    context.draw(false);
  },
//保存签名图片
  saveSign: function() {
    if (arrx.length == 0) {
      common.toast('请签名', 'none', 2000);
      _self.setData({
        showBmbDialog: true,
      });
      return
    }
    let arr = [];
    arr.push(_self.data.signatureImg);
   //这个是自己封装写在common里边的图片上传 你们可以用自己写的图片上传方法++++
    common.uploadFile(arr, 1, function(res) {
      let data = res.data;
      if (data.backCode == 0) {
        _self.setData({
          signatureImg: data.bean.filePath
        });
      } else {
        common.toast('签名上传失败,请重试', 'none', 2000);
            }
    });
  },
}

不过这个签名方法有的时候稍微有一点延迟，如果有更完美的方法也可以推荐给我