人工智能研究中心快递柜——代码分析十

2021SC@SDUSC

目录

电子签名

上传图片签名

---

本次开始审计柜的代码分析，由于两部分有一些功能的原理是相似的，所以优先分析快递柜中没有涉及到的功能，首先是审计柜项目中使用到的签名功能。

签名功能分为两种选择，一种可以直接微信界面电子签名，另一种是拍照上传签名。

电子签名

首先定义出需要的参数。

var context = null;// 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;//是否在绘制中
var arrx = [];//动作横坐标
var arry = [];//动作纵坐标
var arrz = [];//总做状态，标识按下到抬起的一个组合
var canvasw = 0;//画布宽度
var canvash = 0;//画布高度

首先是手写签名的实现，实现画布的初始化执行，画布的宽度和高度通过wx.getSystemInfo获取系统信息得到，然后将它赋予给最开始定义的变量。

startCanvas: function () {//画布初始化执行
 var that = this;
 //获取系统信息
 wx.getSystemInfo({
  success: function (res) {
  canvasw = res.windowWidth;
  canvash = res.windowHeight;
  that.setData({ canvasw: canvasw });
  that.setData({ canvash: canvash });
  }
 }); 
 this.initCanvas();
 this.cleardraw(); 
 },

获得画布的尺寸之后对画布进行进一步的调整，填充颜色，设置线条的宽度等等，主要都是通过插件库中的CanvasContext实现，这里不详细列出。然后是获取画布被绘制的状态，绘制按钮的状态设为true，获取线条的X,Y坐标信息。

canvasStart: function (event) {
 isButtonDown = true;
 arrz.push(0);
 arrx.push(event.changedTouches[0].x);
 arry.push(event.changedTouches[0].y);
 },

获取了坐标信息后要进行显示，context.moveTo和context.lineTo用于移动线条或者创建一个新的起始点，得到线条路径后对字体进行详细设置就可以调用stroke进行绘制。

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

结束绘制和清除画布都比较简单，结束只需要将绘制状态变为false，清除画布只需要将坐标状态设为空数组，并且用clearRect清空画布所占有尺寸的矩形块。

 canvasEnd: function (event) {
 isButtonDown = false;
 },
 //清除画布
 cleardraw: function () {
 arrx = [];
 arry = [];
 arrz = [];
 context.clearRect(0, 0, canvasw, canvash);
 context.draw(true);
 },

上述就是电子签名的功能实现，下面是上传签名的功能实现。

上传图片签名

当有照片上传时，首先要获得临时存储的图片路径，然后要将图片转为为base64数组上传。

  if (that.data.imgList.length != 0) {
      that.setData({
        imgList: that.data.imgList.concat(res.tempFilePath)
      })
    } else {
      that.setData({
        imgList: res.tempFilePath
      })
    }
let base64 = wx.getFileSystemManager().readFileSync(that.data.imgList, "base64");
  let format = "png";
  let img = `data:base64,${base64}`;

上传使用request实现，请求HTTPS网络，data即为转换的base64数组的图片，其他就是基本格式的使用，成功和失败都showToast显示，设定了一个计时器，在定时到期后调用navigateBack关闭当前页面并返回上层页面。

wx.request({
    url: app.globalData.globalReqUrl +'/api/sign/base64',
    data:{
      photo: base64,
    },
    method:'POST',
    header:{
      'content-type':'application/x-www-form-urlencoded',
      'token':app.globalData.token
    },
    success:function(res){
      console.log(res);
      let error = null;
      if(res.data.status!="200"){
        
        error = "系统错误 请稍后尝试"
         
      }
      if(error !== null){
        wx.showToast({
          title: error,
          icon:'none',
          duration:2000
        })
       
      }else{
        wx.showToast({
          title:'上传成功',
          icon:'success',
          duration:1000,
          success:function(){
            setTimeout(function(){
              wx.navigateBack({
                delta: 0,
              })
          },1000);
          }
        })    
       
      }
      
    },
    fail:function(res){
      console.log(res);
    
    }
  })

以上就实现了对签名的获取。