wechat-pilelog/pages/sign/sign.js

// pages/sign/sign.js
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: "",
    rpx: ''
  },

  onLoad: function (options) {
    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.drawImage('../../images/img111.png', 0, 0, canvasw, 500);
    context.draw(false);
  },

  //过程
  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.clearRect(0, 0, canvasw, canvash);

    context.setFillStyle("#FFF")
    context.fillRect(0,0,900,900)

    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    context.stroke();
    context.draw(false);
  },
  // 点击保存图片
  clickMe: function () {
    wx.showToast({
      title: '签名生成中...',
      icon: 'loading',
      duration: 2000
    });

    setTimeout(function () {
      context.draw(true, wx.canvasToTempFilePath({
        canvasId: 'canvas',
        fileType: 'png',
        //quality:0.5,
        success: function (res) {
          //console.log(res);

          let pages = getCurrentPages();
          let prevPage = pages[pages.length - 2]; //首页
          //console.log(pages);
          //console.log(prevPage);
          var signs = [res.tempFilePath];
          // 限制最多只能留下5张照片
          prevPage.setData({
            signs
          });
          wx.navigateBack();
          // //存入服务器
          // 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) {
          //   }
          // });

          // wx.saveImageToPhotosAlbum({
          //   filePath: res.tempFilePath,
          //   success(res) {
          //     console.log(res)
          //     wx.hideLoading();
          //     wx.showToast({
          //       title: '保存成功',
          //     });
          //   },
          //   fail() {
          //     wx.hideLoading()
          //   }
          // });

        }
      }));
    }, 2000);
  },
  canvasEnd: function (event) {
    isButtonDown = false;
  },
  cleardraw: function () {
    //清除画布
    arrx = [];
    arry = [];
    arrz = [];
    context.draw(false);
  },
  goWorksheet(e) {
    wx.navigateBack();
  },
  onShow(e) {
    if (context) {
      this.cleardraw();
    }
  }

})