微信小程序实现手写签字板功能并且将签名图片转为base64格式

主要采用的是canvas画布和bindtouchmove、bindtouchstart、bindtouchend这三个事件实现的

html

<view class="canvas-btn flex-column-center">
    <canvas style="width: 730rpx; height: 750rpx;margin-top:10rpx;border:1rpx solid #F34C00;border-radius: 8rpx;"
            type="2d"
            id="myCanvas"
            bindtouchmove="move"
            bindtouchstart="start"
            bindtouchend="end"
            disable-scroll="true"
            >
    </canvas>
    <view class="canvas-notice fs26 fc-F34C00">签名必须与身份证姓名保持一致（正楷字体）</view>
    <view class="footer bottom">
        <view bindtap="saveClick" class="sure">确 定</view>
        <view bindtap="clearClick" class="cancel">重 签</view>
    </view>
</view>

对应的js

let ctx = null;
let touchs = [];
Page({

  /**
   * 页面的初始数据
   */
  data: {
    drawFinish: false,
    canvas: null,
  },

  // 画布的触摸移动开始手势响应
  start: function (event) {
    //获取触摸开始的 x,y
    let point = { x: event.changedTouches[0].x, y: event.changedTouches[0].y }
    touchs.push(point);
    ctx.beginPath()
    ctx.moveTo(event.changedTouches[0].x, event.changedTouches[0].y)
  },

  // 画布的触摸移动手势响应
  move: function (e) {
    let point = { x: e.touches[0].x, y: e.touches[0].y }
    ctx.lineTo(point.x, point.y);
    ctx.stroke();
    if (touchs.length >= 2) {
      this.setData({
        drawFinish: true
      })
    }
  },

  // 画布的触摸移动结束手势响应
  end: function (e) {
    ctx.closePath()
  },

  //清除操作
  clearClick: function () {
    //清除画布
    ctx.clearRect(0, 0, 730, 750);
    ctx.beginPath()
    touchs = []
    this.setData({
      drawFinish: false
    })
  },
  //保存图片
  saveClick: function () {
    let that=this
    if (!this.data.drawFinish){
      wx.showToast({
        title: '您还没有签名哦~',
        icon: 'none',
        duration: 3000,
        mask: true
      });
    } else {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 730,
        height: 750,
        destWidth: 180,
        destHeight: 185,
        fileType: 'png',  //注意文件格式必须选png,为了兼容安卓跟ios,不然图片背景会是黑色的
        canvas: this.data.canvas,
        success: function (res) {
          that.uploadImg(res.tempFilePath)
        }
      });
    }
    },
    uploadImg: function (file) {
      wx.getFileSystemManager().readFile({
        filePath: file,
        encoding: 'base64',
        success: res => {
               console.log(res.data)  //这就是签字图片的base64格式
        }
      });
    },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
        .fields({ node: true, size: true })
        .exec((res) => {
          const canvas = res[0].node
          this.setData({
            canvas: canvas
          })
          ctx = canvas.getContext('2d')

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

          ctx.strokeStyle ='black'
          ctx.lineGap = "round";
          ctx.lineJoin = "round";
          ctx.lineWidth = 2; // 字体粗细
          // 消除锯齿
          ctx.shadowBlur = 1;
          ctx.shadowColor = '#000';
        })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
})