js 實現簽名效果

js實現簽名效果

本文主要講述如何實現js的簽名效果，其中運用到的關鍵知識點便是canvas面板。

效果圖

實現

1.引入寫好的函數以及插件

<script src="jq-signature.js"></script> <!-- 插件 -->
<script src="writing.js"></script> <!-- 聲明的相關函數 -->

2.調用

<!-- html結構代碼 (vue結構) -->
<div class="modal-body" v-show="siginFlage">
  <div class="js-signature" id="mySignature"></div>
</div>

// 開啓簽名canvas畫布函數 (包含vue語法)
openSiginAction() {
  const _this = this;
  if (window.requestAnimFrame) {
    const width = document.documentElement.clientWidth * 0.9;
    const signature = $("#mySignature");
    signature.jqSignature({
      height: 200,
      width: width,
      border: '1px solid #000',
      background: '#fff',
      lineColor: '#000',
      lineWidth: 5,
      autoFit: false
    });
    // 監控是否已經在簽名
    signature.on("jq.signature.changmove", function() {
      _this.pv = 1;
      _this.siginPv = 1;
    })
    this.siginFlage = true; //開啓顯示
  } else {
    alert("請加載jq-signature.js");
    return;
  }
},

// 重寫函數 - 清空畫布
siginResetAction() {
  // Signature.clearCanvas()
  $('.js-signature').jqSignature('clearCanvas'); //清空畫布
},

// 獲取簽名數據函數
siginConfirmAction() {
  if (this.siginPv==0) {
    layer.open({
      content: '請簽名!',
      skin: 'msg',
      style: 'top:-200px;',
      time: 3
    });
    return '';
  }
  //獲取畫布值
  const singeBase64 = $('.js-signature').jqSignature('getDataURL');
  return siginConfirmAction
},

相關文件鏈接_demo/js

點擊這裏，可直接查看demo和引入的兩個JS