jzmall_wx/pages/ucenter/parter/sign/index.js

// canvas 全局配置
var util = require('../../../../utils/util.js'); 
var api = require('../../../../config/api.js');
var app = getApp();

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.windowHeight;
  }
});
//注册页面
Page({ 
  /**
   * 页面的初始数据
   */
  data: {  
    hasWrited:false
  },
  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);
        //存入服务器
        const uploadTask =wx.uploadFile({
          url: api.StorageUpload, //图片上传接口地址
          filePath: res.tempFilePath,
          name: 'file',
          success: function (_res) {
            console.log(_res);
            var _res = JSON.parse(_res.data);
            if (_res.errno === 0) { //图片上传成功 执行数据更新
              console.log( _res.data.url );
                util.request(api.DisCommissionSign,{
                  picurl:_res.data.url
                }).then(res=>{
                  if(res.errno===0){
                    wx.showToast({
                      title: "签名成功",
                      icon: 'success',
                      duration: 2000,
                      complete: function () { 
                        wx.navigateTo({
                          url: "/pages/ucenter/dis/index"
                        })
                      }
                    }) 
                  } else{
                    wx.showModal({
                      title: '错误',
                      content: '签名失败 请重签',
                      showCancel: false
                    })
                  }  
                }) 
            }
          },
          fail: function (res) {
            wx.showModal({
              title: '错误',
              content: '上传失败',
              showCancel: false
            })
          } 
        });

        uploadTask.onProgressUpdate((res) => {
          console.log('上传进度', res.progress)
          console.log('已经上传的数据长度', res.totalBytesSent)
          console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
        })
      }  
    }) 
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 使用 wx.createContext 获取绘图上下文 context
    context = wx.createCanvasContext('canvas');
    //context.drawImage("/static/images/bk.jpg",0,0,wx.getSystemInfoSync().windowWidth,wx.getSystemInfoSync().windowHeight-40)
    //context.draw();
    context.beginPath() 
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round'); 
 
  }
})