小程序 canvas 实现电子签名

其实随意搜索一下还是有很多先例的，只是有些比较坑得自己筛选。

https://blog.csdn.net/qq_36875339/article/details/81086205

这篇文章真是好，以至于我想给赞赏

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

复制代码

这便是简单雏形了。复制代码

代码可以参考这里：复制代码

http://www.wxapp-union.com/portal.php?mod=view&aid=2538复制代码

Tips:这些方法最好不要放在外面，还是放在methods里面比较好。不然会给你警告，搞得一脸懵逼。说你canvasMove has not defined...复制代码

// canvas 全局配置
var context = null;// 使用 wx.createContext 获取绘图上下文 context
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.windowWidth*7/15;
  }
});
//注册页面
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);
    //context.moveTo(event.changedTouches[0].x, event.changedTouches[0].y);
   
  },
  canvasMove: function (event) {
    if (isButtonDown) {
      arrz.push(1);
      arrx.push(event.changedTouches[0].x);
      arry.push(event.changedTouches[0].y);
      // context.lineTo(event.changedTouches[0].x, event.changedTouches[0].y);
      // context.stroke();
      // context.draw()

    }; 
    
    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) {
        console.log(res.tempFilePath);
        //存入服务器
        wx.uploadFile({
          url: 'a.php', //接口地址
          filePath: res.tempFilePath,
          name: 'file',
          formData: {                                 //HTTP 请求中其他额外的 form data 
            'user': 'test'
          },
          success: function (res) {
            console.log(res);
          },
          fail: function (res) {
            console.log(res);
          },
          complete: function (res) {
            
          }
        });
      }
    })

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


  }
})复制代码

复制代码

这里逻辑是这样的：复制代码

1.首先用canvas实现画图，然后用wx.canvasToTempFilePath 拿到res.tempFilePath (这是暂时存储的地址，不可以直接打开的)复制代码

2.其次用 wx.getFileSystemManager().readFile({
          filePath: res.tempFilePaths, //选择图片返回的相对路径
          encoding: 'base64', //编码格式
          success: res => { //成功的回调
            console.log('data:image/png;base64,' + res.data)———>>>>这个就是可以直接打开的base64的图片，存储在本地的。
          }
        })
3.最后，把这个地址存到vuex,哪里都可以用啦。复制代码

复制代码

（由于特别原因不能完全贴代码，但是这是实际项目，没毛病～）复制代码

复制代码