小程序 canvas 实现电子签名

要在小程序中实现电子签名，可以使用小程序的 `canvas` 组件。

首先，在页面的 `wxml` 文件中添加 `canvas` 组件：

<canvas id="canvas" class="canvas"></canvas>

然后，在页面的 `js` 文件中，获取 `canvas` 组件的上下文：

Page({
  onLoad: function () {
    const ctx = wx.createCanvasContext('canvas');
  }
})

接下来，监听用户手指在 `canvas` 上的滑动事件，并将滑动轨迹绘制到 `canvas` 上：

Page({
  data: {
    startX: 0,
    startY: 0,
    endX: 0,
    endY: 0
  },
  onLoad: function () {
    const ctx = wx.createCanvasContext('canvas');
    ctx.setStrokeStyle('#000000');
    ctx.setLineWidth(5);
    ctx.setLineCap('round');
    ctx.setLineJoin('round');
    ctx.beginPath();
    ctx.draw();
  },
  onTouchStart: function (e) {
    this.setData({
      startX: e.changedTouches[0].x,
      startY: e.changedTouches[0].y
    });
  },
  onTouchMove: function (e) {
    const ctx = wx.createCanvasContext('canvas');
    this.setData({
      endX: e.changedTouches[0].x,
      endY: e.changedTouches[0].y
    });
    ctx.moveTo(this.data.startX, this.data.startY);
    ctx.lineTo(this.data.endX, this.data.endY);
    ctx.stroke();
    ctx.draw(true);
    this.setData({
      startX: this.data.endX,
      startY: this.data.endY
    });
  }
})

最后，将 `canvas` 组件保存为图片，并将图片保存到本地：

Page({
  data: {
    imageSrc: ''
  },
  onSave: function () {
    const ctx = wx.createCanvasContext('canvas');
    wx.canvasToTempFilePath({
      canvasId: 'canvas',
      success: (res) => {
        this.setData({
          imageSrc: res.tempFilePath
        });
        wx.saveImageToPhotosAlbum({
          filePath: this.data.imageSrc,
          success: (res) => {
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            });
          },
          fail: (err) => {
            wx.showToast({
              title: '保存失败',
              icon: 'none',
              duration: 2000
            });
          }
        });
      },
      fail: (err) => {
        wx.showToast({
          title: '保存失败',
          icon: 'none',
          duration: 2000
        });
      }
    });
  }
})

完整代码示例：

<view class="container">
  <canvas id="canvas" class="canvas" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove"></canvas>
  <view class="btn-group">
    <button class="btn" bindtap="onSave">保存签名</button>
  </view>
</view>

Page({
  data: {
    startX: 0,
    startY: 0,
    endX: 0,
    endY: 0,
    imageSrc: ''
  },
  onLoad: function () {
    const ctx = wx.createCanvasContext('canvas');
    ctx.setStrokeStyle('#000000');
    ctx.setLineWidth(5);
    ctx.setLineCap('round');
    ctx.setLineJoin('round');
    ctx.beginPath();
    ctx.draw();
  },
  onTouchStart: function (e) {
    this.setData({
      startX: e.changedTouches[0].x,
      startY: e.changedTouches[0].y
    });
  },
  onTouchMove: function (e) {
    const ctx = wx.createCanvasContext('canvas');
    this.setData({
      endX: e.changedTouches[0].x,
      endY: e.changedTouches[0].y
    });
    ctx.moveTo(this.data.startX, this.data.startY);
    ctx.lineTo(this.data.endX, this.data.endY);
    ctx.stroke();
    ctx.draw(true);
    this.setData({
      startX: this.data.endX,
      startY: this.data.endY
    });
  },
  onSave: function () {
    const ctx = wx.createCanvasContext('canvas');
    wx.canvasToTempFilePath({
      canvasId: 'canvas',
      success: (res) => {
        this.setData({
          imageSrc: res.tempFilePath
        });
        wx.saveImageToPhotosAlbum({
          filePath: this.data.imageSrc,
          success: (res) => {
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            });
          },
          fail: (err) => {
            wx.showToast({
              title: '保存失败',
              icon: 'none',
              duration: 2000
            });
          }
        });
      },
      fail: (err) => {
        wx.showToast({
          title: '保存失败',
          icon: 'none',
          duration: 2000
        });
      }
    });
  }
})