Plugin - JSignature 簽名套件

Plugin - JSignature 簽名套件

參考資料:

JSignature 官方網站

JSignature GitHub
JSignature method & option & demo 

JSignature 隱藏簽名畫面預設底線
JSignature 檢查是否已sign in

相關規格:

  JQuery mobile : 1.3

  簽名套件:

  flashcanvas.js    jSignature.min.js    jSignature.min.noconflict.js

← <div id="signature"> </div>

[ 簽名框 ]

 <button id="exportCheck">提交簽名檔</button>

 <button onclick="importImg($('#signature'))">查詢簽名檔</button>

<button id="clearSign">清  除</button>

//產生簽名框架 內容樣式設定    
$(document).ready(function() {
    $("#signature").jSignature({
      color:"#00f",                         //簽名筆劃顏色
      lineWidth:2,                          //簽名線寬
      'UndoButton':true,                    //復原筆劃
      'background-color': 'transparent',    //隱藏簽名框底線1 
      'decor-color': 'transparent'          //隱藏簽名框底線2
    });
  });

  //按下提交btn，檢查是否簽名，審核後再進行資料記錄
  $('#exportCheck').click(function(){     
    //取得簽名內容數據格式，預設base64
    var signSrc = $('#signature').jSignature('getData');  
    var isSignatureProvided = 
       $('#signature').jSignature('getData','base30')[1].length> 1 ? true : false;     
    if(!isSignatureProvided){
      alert('尚未簽名，無法提交!');
      return;
    }  
    //...do something you want to do
    alert('已提交簽名檔');
  });

  //清除 簽名框內的筆劃
  $('#clearSign').click(function(){
    $('#signature').jSignature('clear');
  });

  //將簽名框內容，以圖片模式呈現
  function importImg(sig){
   $("").attr("src",sig.jSignature('getData')).appendTo(sig);
  }

◎ 簽名框 畫布 畫筆 樣式
width(畫布寬) : default 250
height(畫布高) : default 150
color(畫筆顏色) : default #000 黑
background-color(背景顏色) : default #fff 白
lineWidth(畫筆寬度) : default 1
cssclass(自訂css) : default None


卒仔〞筆記 : 匯出圖片數據格式在此僅用base64，存成圖片為 .png 副檔案!!