微信小程序canvas实现签名(源码)

1.wxml

<!--pages/page/cvsAutograph/cvsAutograph.wxml-->
<view class="wrapper">
  <view class="handBtn">
    <button class="backBtn">返回</button>
    <button catchtap="cleardraw" class="delBtn">清空</button>
    <button catchtap="getimg" class="subBtn">完成</button>
  </view>
  <view class="handCenter">
  <canvas class="canvas" style="height:{{cvsHeight=='100%'?cvsHeight:cvsHeight+'px'}}" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
    <cover-image class='overImg' src="{{src}}" wx:if="{{src!=''}}">
    </cover-image>
  </view>
  <view class="handRight">
    <view class="handTitle">签名板</view>
  </view>
</view>

2.wxss

/* pages/page/cvsAutograph/cvsAutograph.wxss */
page {
  background: #fbfbfb;
  height: auto;
  overflow: hidden;
}
canvas {
width:100%;
/* height:100%; */
}

.wrapper {
  width: 100%;
  height: 95vh;
  margin: 30rpx 0;
  overflow: hidden;
  display: flex;
  align-content: center;
  flex-direction: row;
  justify-content: center;
  font-size: 28rpx;
}

/* .handWriting {
  background: #fff;
  width: 100%;
  height: 95vh;
} */

.handRight {
  display: inline-flex;
  align-items: center;
}

.handCenter {
  position: relative;
  border: 4rpx dashed #e9e9e9;
  flex: 5;
  overflow: hidden;
  box-sizing: border-box;
}
.overImg{
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
}

.handTitle {
  transform: rotate(90deg);
  flex: 1;
  color: #666;
}

.handBtn button {
  font-size: 28rpx;
}

.handBtn {
  height: 95vh;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;
  flex: 1;
}
.backBtn{
  position: absolute;
  top: 50rpx;
  left: 0rpx;
  transform: rotate(90deg);
  color: #666;
}
.delBtn {
  position: absolute;
  top: 250rpx;
  left: 0rpx;
  transform: rotate(90deg);
  color: #666;
}


.subBtn {
  position: absolute;
  bottom: 52rpx;
  left: -3rpx;
  display: inline-flex;
  transform: rotate(90deg);
  background: #008ef6;
  color: #fff;
  margin-bottom: 30rpx;
  text-align: center;
  justify-content: center;
}

3.js

// canvas 全局配置
var context = null;// 使用 wx.createContext 获取绘图上下文 context
var arrx = [];//所有点的X轴集合
var arry = [];//所有点的Y轴集合
var canvasw = 0;//画布的宽 
var canvash = 0;//画布的高
var top = 0;
var left = 0;
let app = getApp();
//注册页面
Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  //绘制之前
  canvasStart: function (event) {
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
    //就算点击之后手指没有移动,那么下次要移动之前还是必定会先触发这个
  },
  //手指移动过程
  canvasMove: function (event) {
    context.moveTo(arrx[arrx.length - 1], arry[arrx.length - 1])
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
    context.lineTo(event.changedTouches[0].x, event.changedTouches[0].y);
    context.setLineWidth(4);//设置线条的宽度
    context.setLineCap('round');//设置结束时 点的样式
    context.stroke();//画线
    context.draw(true);//设置为true时，会保留上一次画出的图像，false则会清空
  },
  //手指离开
  canvasEnd: function (event) {

  },
  cleardraw: function () {
    //清除画布
    arrx = [];
    arry = [];
    // arrz = [];
    context.clearRect(0, 0, canvasw, canvash);
    context.draw(false);
    this.setData({
      cvsHeight: "100%",
      src:''
    })
  },
  //导出图片
  getimg: function () {
    if (arrx.length == 0) {
      wx.showModal({
        title: '提示',
        content: '签名内容不能为空！',
        showCancel: false
      });
      return false;
    };
    wx.showLoading({
      title: '签名生成中..',
      mask:true
    })
    let that = this;
    //先拿到竖着的地址给image,挡住下面的操作!
    wx.canvasToTempFilePath({
      canvasId: 'canvas',
      // width: canvasw,
      // height: canvash,
      // destWidth: canvasw,
      // destHeight: canvasw * canvasw / canvash,
      success: function (res) {
        //把当前的图片放上去挡住,接着操作下面的canvas
        that.setData({
          src: res.tempFilePath,
          cvsHeight: canvasw * canvasw / canvash
        })
        context.clearRect(0, 0, canvasw, canvash);
        context.translate(0, canvasw/2.4);
        context.rotate(270 * Math.PI / 180);
        context.drawImage(res.tempFilePath, 0, 0,canvasw * canvasw / canvash, canvasw);
        context.draw(false, setTimeout(function () {
          wx.canvasToTempFilePath({
            canvasId: 'canvas',
            success: result => {
              console.log(result.tempFilePath);
             //转成base64
              wx.getFileSystemManager().readFile({ 
                  filePath: res.tempFilePath, //选择图片返回的相对路径
                  encoding: 'base64', //编码格式
                  success: result => { //成功的回调
                    let base64 = result.data;    
                  }
              })  
              //全局变量,用于返回显示
              app.globalData.pages.cvsAutograph.autograph = result.tempFilePath;
              wx.navigateTo({
                url: '../index/index'
              })
              wx.hideLoading()
            }
          }, this)
        }, 100))
      }
    })

  },
  /**
   * 页面的初始数据
   */
  data: {
    src: "",
    cvsHeight:'100%',
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.showLoading({
      title: '加载中...',
      mask: true
    })
    // 使用 wx.createContext 获取绘图上下文 context
    context = wx.createCanvasContext('canvas');
    context.beginPath();

    var query = wx.createSelectorQuery();
    query.select('.handCenter').boundingClientRect(rect => {
      top = rect.top;
      left = rect.left;
      canvasw = rect.width;
      canvash = rect.height;
      wx.hideLoading()
    }).exec();
  }
})