微信小程序-实现签字板的效果（附代码和效果）

项目需要客户手写签名，以图片的方式保存并上传给服务器。主要通过canvas实现，以.png的图片格式保存下来，话不多说，看看代码吧。

wxml

  
    重置
    确认
    
      {{text}}
    

    

  

wxss

page {
  background: #f2f5f5;
}

.bg {
  width: 686rpx;
  height: 300rpx;
  margin: 18rpx auto 0 auto;
  background-color: #fff;
  text-align: center;
  font-size: 36rpx;
  position: relative;
  color: #d7d7d7;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}

canvas {
  width: 600rpx;
  position: absolute;
  top: 0;
  left:0;
  background-color: transparent;
  height: 300rpx;

}

.clear {
  font-size: 24rpx;
  color: #06ca79;
  position: absolute;
  top: 20rpx;
  right: 21rpx;
}

.checkBtn {
  font-size: 24rpx;
  color: #06ca79;
  position: absolute;
  bottom: 20rpx;
  right: 21rpx;
}

js

const app = getApp()
Page({
  data: {
    context: null,
    index: 0,
    text: '请尽量使用正楷字体签名',
  },
  /**记录开始点 */
  bindtouchstart: function (e) {
    this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
  },
  /**记录移动点，刷新绘制 */
  bindtouchmove: function (e) {

    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: function () {
    this.data.context.clearRect(0, 0, this.data.width, this.data.height);
    this.data.context.draw();
    this.data.context.setStrokeStyle('#151515')
    this.data.context.setLineWidth(6)
    this.data.context.setFontSize(26)
    let str = ''
    this.data.context.fillText(str, Math.ceil((this.data.width - this.data.context.measureText(str).width) / 2), Math.ceil(this.data.height / 2) - 20)
    this.data.context.draw()
  },
  /**导出图片 */
  export: function () {
    wx.showLoading({
      title: '上传中,请稍等',
    })
    const that = this;
    this.data.context.draw(false, wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: that.data.width,
      height: that.data.height,
      destWidth: that.data.width,
      destHeight: that.data.height,
      fileType: 'png', //上传的图片格式
      canvasId: 'firstCanvas',
      success(res) {
        wx.uploadFile({
          url: ‘.......’, //请求地址
          filePath: res.tempFilePath,
          name: 'file',
          formData: { }, //所需额外传给服务器的参数
          header: {
            'Content-Type': "multipart/form-data"
          },
          success(res) {
            wx.hideLoading()
            let getData = JSON.parse(res.data)
            if (getData.code === 200) {
              //上传成功签名
              wx.showToast({
                title: '上传成功'
              })
              wx.navigateBack()
            } else {
              wx.showToast({
                title: ‘’,
                icon:'none'
              })
            }
          },
          fail(err) {
            wx.showToast({
              title: '上传失败',
              icon: 'none',
              duration: 2000
            })
          }
        })

      },
      fail() {
        wx.showToast({
          title: '导出失败',
          icon: 'none',
          duration: 2000
        })
      }
    }))

  },
  onLoad: function () {
    this.setData({
      height: wx.getSystemInfoSync().windowWidth - 332
    })
  },
  onShow: function () {
    let query = wx.createSelectorQuery();
    const that = this;
    query.select('#firstCanvas').boundingClientRect();
    query.exec(function (rect) {
      let width = rect[0].width;
      let height = rect[0].height;
      that.setData({
        width,
        height
      });
      const context = wx.createCanvasContext('firstCanvas')
      that.setData({
        context: context
      })
      context.setStrokeStyle('#151515')
      context.setLineWidth(6)
      context.setFontSize(26)
      // let str = "签名区域";
      let str = ''
      context.fillText(str, Math.ceil((width - context.measureText(str).width) / 2), Math.ceil(height / 2) - 20)
      //设置线两端端点样式更加圆润
      context.setLineCap('round');
      //设置两条线连接处更加圆润
      context.setLineJoin('round');
      context.draw()
    });
  }
})

效果图如下：
由于我设置的横屏签字，所以页面显示的是横屏效果。

图片.png