微信小程序实现电子签名并导出图片

<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>

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

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');
 }
})