电子签名，保存

引言，这个功能是我看到CSDN里面一个老哥写的，感觉挺不错的，就拿出来借鉴一下并优化了一些功能，比如页面样式和保存之后的黑色底色这些，原链接如下：https://blog.csdn.net/weixin_42460570/article/details/83025660

先上一波效果吧

小程序电子签名.gif

下面是代码部分了

html

  
  
 
  
 
  
    清除
    完成
 
  

css

.canvas {
  width: 100%;
  height: calc(100% - 3.5rem);
  /* border-bottom: 1rpx solid #e2e2e2e2;   */
  position: fixed;
  box-sizing: border-box;
  background: #fff;

} 
 
.imageCanvas{
  width: 100%;
  height: 300rpx;
}
.buttonBox{
  width: 100%;
  justify-content: center;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 3.5rem;
align-items: center;
background: #fff;
border-top: 1px solid #eeeeee;

}
.buttonBox button{
  flex: 1;
  height: 100%;
  line-height:3.5rem;
  padding: 0;
}

js

// canvas 全局配置
var context = null;
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//注册页面
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);
 
  },
  data: {
    src: "",
    img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=578899140,1412678472&fm=27&gp=0.jpg",
    rpx: ''
  },
 
  onLoad: function (options) {
    wx.showModal({
      title:'提示',
      content:'请横屏填写',
      showCancel:false,
      confirmText:'我已知晓',
      confirmColor:'#09bb07'
    })
    var that = this
    // 使用 wx.createContext 获取绘图上下文 context
    context = wx.createCanvasContext('canvas');
    context.beginPath()
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    
    context.setFillStyle('#ffffff') 
    context.fillRect(0, 0, 500, 750)
    // context.drawImage('../../images/img111.png', 0, 0, canvasw, 500);
    context.draw();
  },
 
  //过程
  canvasMove: function (event) {
    var that = this
    if (isButtonDown) {
      arrz.push(1);
      console.log(event)
      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.setFillStyle('#ffffff') 
    context.fillRect(0, 0, 500, 750)
    context.clearRect(0, 0, canvasw, canvash);
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    context.stroke();
 
    context.draw(false);
  },
  // 点击保存图片
  clickMe: function () {
    wx.showLoading({
      title: '正在保存中...',
    })
    wx.canvasToTempFilePath({
      canvasId: 'canvas',
      fileType: 'png',
      success: function (res) {
        console.log(res)
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            console.log(res)
            wx.hideLoading();
            wx.showToast({
              title: '保存成功',
            });
            // //存入服务器
            // 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) {
            //   }
            // });
          },
          fail() {
            wx.hideLoading()
          }
        })
      }
    })
  },
  canvasEnd: function (event) {
    isButtonDown = false;
  },
  cleardraw: function () {
    //清除画布
    arrx = [];
    arry = [];
    arrz = [];
    context.draw(false);
  },
 
})