wxml

<view class="container">
  <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart"
    bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd"
    binderror="canvasIdErrorCallback"></canvas>
  <view class="tips">
    請(qǐng)?jiān)诳騼?nèi)簽字
  </view>
  <view class='addBtn'>
    <button type="default" class='txt' bindtap="cleardraw">重新簽名</button>
    <button type="default" class='txt' bindtap="getimg">提交簽字</button>
  </view>
</view>

js

const fileManager = wx.getFileSystemManager();
 
// canvas 全局配置
var context = null; // 使用 wx.createContext 獲取繪圖上下文 context
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//獲取系統(tǒng)信息
wx.getSystemInfo({
  success: function (res) {
    canvasw = res.windowHeight * 3.0; //設(shè)備寬度
    // canvash = res.windowWidth * 7 / 15;
    canvash = res.windowWidth * 1.2;
  }
});
//注冊(cè)頁(yè)面
Page({
 
  /**
 1. 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    signFlag: false,
  },
 
  /**
 2. 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function (options) {
    context = wx.createCanvasContext('canvas');
    context.setFillStyle('#fff')
    context.fillRect(0, 0, canvasw, canvash)
    context.draw(true)
    context.beginPath()
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
  },
  onShow() {
    arrx = [];
    arry = [];
    arrz = [];
  },
 
  isJSON(str) {
    if (typeof str == 'string') {
      try {
        var obj = JSON.parse(str);
        if (typeof obj == 'object' && obj) {
          return true;
        } else {
          return false;
        }
      } catch (e) {
        return false;
      }
    }
  },
 
  canvasIdErrorCallback: function (e) { },
  //開(kāi)始
  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);
 
  },
  //過(guò)程
  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()
    };
 
    this.setData({
      signFlag: true,
    })
 
    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.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    context.stroke();
    context.draw(true);
  },
  canvasEnd: function (event) {
    isButtonDown = false;
  },
  cleardraw: function () {
    //清除畫(huà)布
    arrx = [];
    arry = [];
    arrz = [];
    context.clearRect(0, 0, canvasw, canvash);
    context.draw(true);
  },
  //導(dǎo)出圖片
  getimg: function () {
    let that = this
    if (arrx.length == 0) {
      wx.showModal({
        title: '提示',
        content: '簽名內(nèi)容不能為空！',
        showCancel: false
      });
      return false;
    };
    console.log(this.data.signFlag);
    if (!this.data.signFlag) {
      wx.showModal({
        title: '提示',
        content: '簽名內(nèi)容不能為空！',
        showCancel: false
      });
      return false;
    }
    //生成圖片
    wx.canvasToTempFilePath({
      canvasId: 'canvas',
      success: function (res) {
        //將圖片轉(zhuǎn)換為base64 的格式
        //let base64 = 'data:image/jpg;base64,' + fileManager.readFileSync(res.tempFilePath,'base64'); 
        //文件圖片類(lèi)型上傳
          wx.uploadFile({
          url: app.globalData.apiBaseUrl + app.globalData.uploadUrl,
          filePath: res.tempFilePath,//要上傳文件資源的路徑（本地路徑）
          name:'file',
          header: {
            'X-Access-Token': app.globalData.accessToken
          },
          success: function (res){
            const jsom = JSON.parse(res.data)
             //簽名圖片 oss地址
            let data = {}
            data.signature = jsom.message
            data.userId = that.data.userId
             api.contractSigning(JSON.stringify(data)).then(res => {
                  if (res.success){
                    util.showErrorToast("簽署成功");
                    setTimeout(()=>{
                      wx.navigateTo({
                        url: "/pages/index/index"
                      })

                    },1000)
                  }else {

                  }
             })
          },
          fail:function (err){
            
          }
        })
      }
    })
 
  },
 
})

wxss

page{
  background: #fff;
}
.container {
  width: 95%;
  position: absolute;
  height: 95%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  background: #fff;
  border-radius: 5px;
}
.canvas {
  width: 100%;
  height: 70%;
  border: 1px solid #aaa;
  box-sizing: border-box;
}
.tips{
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #aaa;
}
  
.addBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18%;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  z-index: 100;
}
  
.addBtn .txt {
  text-align: center;
  width: 90%;
  font-size: 13px;
  border-radius: 100px;
  background: #0097fe;
  color: #fff;
  box-sizing: border-box;
  margin: 0 10px;
  padding: 10px;
  z-index: 100;
}

開(kāi)啟橫屏
json文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-718459.html

 "pageOrientation": "landscape

到了這里，關(guān)于微信小程序手寫(xiě)簽名的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！