WXML

  <view class="qianzi">
    <view class="paper">
      <canvas class="handWriting" disable-scroll="true" bindtouchstart="touchstart1" bindtouchmove="touchmove1"
        canvas-id="handWriting1">
      </canvas>
    </view>
    <view class="signBtn">
      <
 
button class="btn1" size=""  bindtap="sign1ok">完成簽字</button>
      <button class="btn2" size="" bindtap="reSign1">清除簽名</button>
    </view>
  </view>

<view class="image" hidden="{{src?false:true}}">
   <image src="{{src}}"></image>
</view>

JS

data:{ optionsTaskid:'',//接收到的任務id orderKey:'', context1:null, hasDraw:false,//預設沒有畫 src:null, },

  
touchstart1: function
 
 (e) {
    var context1 = this.data.context1;
    context1.moveTo(e.touches[0].x, e.touches[0].y);
    this.setData({
      context1: context1,
      hasDraw: true, //要簽字了
    });
  },
  touchmove1: function (e) {
    var x = e.touches[0].x;
    var y = e.touches[0].y;
    var context1 = this.data.context1;
    context1.setLineWidth(
 
3);
    context1.lineTo(x, y);
    context1.stroke();
    context1.setLineCap('round');
    context1.draw(true);
    context1.moveTo(x, y);
  },
  reSign1: function () { //重新畫
    var that = this;
    var context1 = that.data.context1;
    context1.draw(); //清空畫布
    that.setData({
      hasDraw: false, //沒有畫
      src: null
    });
  },

sign1ok:function(){ varthat=this; if(!that.data.hasDraw){ returnapp.Tips({ title:"您還未簽名" }) }; varcontext1=that.data.context1; context1.draw(true,wx.canvasToTempFilePath({ canvasId:'handWriting1', success(res){ console.log("res:",res) console.log(res.tempFilePath)//得到了圖片下面自己寫上傳吧 letUrl=getApp().globalData.url, header=HEADER; console.log("Url:",Url) if(getApp().globalData.token)header[TOKENNAME]='Bearer'+getApp().globalData.token; wx.uploadFile({ url:Url+"/api/task/upload/contract", filePath:res.tempFilePath, name:"file", formData:{ file:"image", key:that.data.orderKey }, header:{ "Content-Type":"multipart/form-data", [TOKENNAME]:'Bearer'+getApp().globalData.token }, success:function(result){ console.log(result) vardata=JSON.parse(result.data) if(data.status==200){ app.Tips({ title:data.msg }); setTimeout(function(){ wx.redirectTo({ url:'/pages/shouerlige/taskOrder_pay/index?key='+that.data.orderKey+"&taskid="+that.data.optionsTaskid, }) },1200) }else{ returnapp.Tips({title:data.msg}) } }, fail:function(err){ } }) } })) },