签字版功能

点击跳转到横向签字版，签字版有完成签字、重新签字、取消签字功能
返回原来的页面后获取签字版生成的图片
图片上传到阿里服务器，页面卸载时清理图片

具体实现

基于小程序 + canvas实现效果图：

1、签名版部分代码

json

{
  "navigationBarTitleText": "签名版",
  "pageOrientation":"landscape",  // 横屏
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"  // 使用vant组件库的按钮组件，也可以不使用。
  }
}

wxml

<view class="paper">
  <canvas class="handWriting" disable-scroll="true" bindtouchstart="touchstart1" bindtouchmove="touchmove1" canvas-id="handWriting1">
  </canvas>
</view>
<view class="button">
  <van-button class="bottom-btn" type="primary" size="small" block bindtap="sign1ok">完成签名</van-button>
  <van-button class="bottom-btn" type="primary" size="small" block bindtap="reSign1">重新签名</van-button>
  <van-button class="bottom-btn" type="primary" size="small" block bindtap="back">取消签名</van-button>
</view>

wxss

.paper {
  border: 1px solid #dedede;
  width: 75%;
  margin: 20rpx 50rpx;
}
.handWriting {
  width: 100%;
  height: 250rpx;
}
.button {
  position: absolute;
  right: 50rpx;
  top: 0rpx;
}
.bottom-btn {
  margin: 10rpx;
}

const app = getApp();  // 拿到全局对象，前面暂存在全局
Page({
  data: {
    context1: null,
    hasDraw:false, //默认没有画
    src:null,  // 图片地址
  },
  onLoad: function() {
    var context1 = wx.createCanvasContext('handWriting1');
    context1.setStrokeStyle("#000000")
    context1.setLineWidth(3);
    this.setData({
      context1: context1,
    })
  },
  // 开始触碰签名版
  touchstart1: function(e) {
    var context1 = this.data.context1;
    context1.moveTo(e.touches[0].x, e.touches[0].y);
    this.setData({
      context1: context1,
      hasDraw : true, // 开始签字
    });
  },
  // 移动手指
  touchmove1: function(e) {
    var x = e.touches[0].x;
    var y = e.touches[0].y;
    var context1 = this.data.context1;
    context1.setLineWidth(3);
    context1.lineTo(x, y);
    context1.stroke();
    context1.setLineCap('round');
    context1.draw(true);
    context1.moveTo(x, y);
  },
  // 重新签名点击事件
  reSign1: function() { // 重新画
    var that = this;
    var context1 = that.data.context1;
    context1.draw(); // 清空画布
    that.setData({
      hasDraw: false, // 没有画
      src: null
    });
  },
  // 确认签名事件
  sign1ok: function () {
    var that = this;
    if(!that.data.hasDraw){
      console.log("签字是空白的 没有签字")
    }else{
      var context1 = that.data.context1;
      context1.draw(true, wx.canvasToTempFilePath({  // 微信提供的接口，转成图片，是微信临时文件，有时效性。最好及时上传到自己的服务器或oss
        canvasId: 'handWriting1',
        success(res) {
          // 得到了图片暂存在全局数据，其他页面就可以在全局数据拿到签名图片
          app.globalData.signUrl = res.tempFilePath
          console.log(res.tempFilePath) 
          wx.navigateBack();
          that.setData({
            src: res.tempFilePath
          })
        }
      }))
    }
  },
  // 取消签名
  back(){
    this.reSign1();  // 清空画布内容
    wx.navigateBack(); // 返回上一个页面
  }
});

2、使用签名图片的页面

wxml

<!-- 签名图片为空时显示点击签名，不为空时显示签名图片 -->
<view class="sign" bindtap="goSign">
    <view wx:if="{{!signUrl}}">点击签名</view>
    <image src="{{signUrl}}"></image>
</view>

wxss

.sign {
  position: relative;
  width: 90%;
  left: 5%;
  height: 400rpx;
  border:  var(--border-width-base) solid var(--border-color);
  background-color: var(--white);
}
.sign image { 
  width: 100%;
  height: 100%;
  background-color: var(--gray-4);
}
.sign view {
  position: absolute;
  color: var(--gray-6);
  font-size: 60rpx;
  text-align: center;
  width: 300rpx;
  height: 100rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 封装的一个上传文件到阿里云服务器的方法，传入临时文件，返回一个服务器图片地址字符串。
// 根据自己业务需要来实现这个方法，可以上传到自己服务器或oss。
// 不需要上传的不涉及这个也完全不影响功能，但是签名图片是微信临时文件，会有时效性。
import upload from '@api/upload';
// 导入全局对象
const app = getApp();  
Page({
    data:{
        signUrl: '',  // 签名图片，默认为空
    }
    // 生命周期函数--监听页面显示
    onShow() {
        let url = app.globalData.signUrl
        if (url) {
          this.setData({ signUrl: url });
          // 图片上传服务器 start
          const file  = {type:"image",url:url} 
          upload(file,'filePath/').then(imgUrl => {
            this.setData({ signUrl: imgUrl });
          })
          // 图片上传服务器 end
        }
    },
   // 生命周期函数--监听页面卸载
   onUnload() {
    // 销毁签名图片，为了避免下次进来还能看到本次的签名信息，页面卸载时最好清理一下
    this.setData({
      signUrl:''
    })
    app.globalData.signUrl = '';
   },
})

电子签字版

签字版功能

具体实现

1、签名版部分代码

2、使用签名图片的页面