微信小程序做电子签名，并导出图片

wxml:

<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>

<button type="default" bindtap="cleardraw">清除画布</button>
<button type="default" bindtap="getimg">导出图片</button>

wxss:

.canvas {
    
  width: 100%;
  min-height: 400rpx;
  border: 1rpx solid #000;   /*//突出canvas画布范围 */
  box-sizing: border-box;
}

js:

var context = null;// 使用 wx.createContext 获取绘图上下文
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//获取系统信息
wx.getSystemInfo({
    
  success: function (res) {
    
    canvasw = res.windowWidth;//设备宽度
    canvash = res.windowHeight; //设备高度
  }
});

Page({
    
  canvasIdErrorCallback: function (e) {
    
    console.error(e.detail.errMsg)
  },
  //绘制开始
  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);
  },
  canvasEnd: function (event) {
    
    isButtonDown = false;
  },
  cleardraw: function () {
    
    //清除画布
    arrx = [];
    arry = [];
    arrz = [];
    context.clearRect(0, 0, canvasw, canvash);
    context.draw(true);
  },
  //导出图片
  getimg: function () {
    
    if (arrx.length == 0) {
    
      wx.showModal({
    
        title: '提示',
        content: '签名内容不能为空！',
        showCancel: false
      });
      return false;
    };
    //生成图片
    wx.canvasToTempFilePath({
    
      canvasId: 'canvas',
      success: function (res) {
    
        wx.saveImageToPhotosAlbum({
    
          filePath: res.tempFilePath,
          success(res) {
    
            // console.log(res)
            wx.showToast({
    
              title: '保存成功',
            });
          },
          fail(err) {
    
           console.log(err)
          }
        })
        //将照片存入服务器
        // wx.uploadFile({
    
        // url: '', //接口地址
        // filePath: res.tempFilePath,
        // name: 'file',
        // formData: { 
        // 'user': 'test'
        // },
        // success function (res) {
    
        // console.log(res);
        // },
        // fail: function (res) {
    
        // console.log(res);
        // },
        // complete: function (res) {
    
        // }
        // });
      }
    })

  },
  /** * 页面的初始数据 */
  data: {
    
   
  },
  /** * 生命周期函数--监听页面加载 */
  onLoad: function (options) {
    
    // 使用 wx.createContext 获取绘图上下文 context
    context = wx.createCanvasContext('canvas');
    context.beginPath()
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
  }
})