jSignature手寫簽名的實現

jSignature.js是實現手寫簽名的插件，由於jSignature.js是基於jQuery的，所以使用時需要先引入jQuery。切記！！！

具體使用方法如下：

第一步，下載jSignature.js,從哪下載呢？https://github.com/brinley/jSignature  感謝GitHub

第二步，引入jQuery 和 jSignature.js

第三步，生成html結構

　　 <div id="signature" style="height: 100%;"></div>
    <button type="button" onclick="jSignatureTest()">生成簽名</button>
    <button type="button" onclick="reset()">重置簽名</button>
    <div id="image" style="margin:20px"></div>

第四步，初始化jSignature，具體怎么初始化呢？往下看

$(function(){
   //初始化插件
   $("#signature").jSignature();
})

就可以啦！

第五步，點擊生成簽名，導出圖片，重置jSignature

//輸出簽名圖片
        function jSignatureTest(){
            var $sigdiv = $("#signature");
            var datapair = $sigdiv.jSignature("getData", "svgbase64")
            console.log(datapair);
//          datapair = ["image/svg+xml;base64","PD94bWwgdmVyc2lvbj0iMS4wIi
//          BlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2Zy
//          BQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My
//          5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPS
//          JodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD
//          0iMzEiIGhlaWdodD0iMzQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMD
//          AwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm
//          9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0gMSAxIGMgMC4xMiAwLjExIDUuMDEgMy
//          43NiA3IDYgYyAzLjI1IDMuNjUgNS43MSA4LjM1IDkgMTIgYyAyLjY0IDIuOTMgNi
//          4zNyA1LjE2IDkgOCBjIDEuNTggMS43IDQgNiA0IDYiLz48L3N2Zz4="]
            var img = new Image();
            img.src = "data:" + datapair[0] + "," + datapair[1]
            $(img).appendTo($("#image"))
        }

        function reset(){
            var $sigdiv = $("#signature");
            $sigdiv.jSignature("reset");
        }

到這里就結束啦！

最后奉上jSignature的一些方法：

• init是默認的假定操作。init接受一個參數-設置對象。您可以省略該命令，而只是在初始化時將設置對象傳遞給它。返回（以傳統的jQuery可鏈接方式）jQuery對象ref到應用插件的元素。
• reset只需清除簽名板，數據存儲（並放回簽名線和其他裝飾）即可。返回（以傳統的jQuery可鏈接方式）jQuery對象ref到應用插件的元素。
• clear 重設別名（用於舊版目的）。
• destroy 銷毀實例。
• getData接受一個參數-數據格式的名稱。返回適合該數據格式的數據對象。
• setData接受兩個參數-數據對象，數據格式名稱。如果數據對象是以數據URL模式格式化的字符串，則無需指定數據Dormat名稱。數據格式名稱（MIME）將在data-url前綴中隱含。參見下面的示例。返回（以傳統的jQuery可鏈接方式）jQuery對象ref到應用插件的元素。
• importData setData的別名，用於傳統用途。
• listPlugins需要一個參數-一個字符串，表示該類別（只export，import插件列出的在這個時候支持）。返回字符串數組。
• disable 使畫布為只讀並禁用jSignature按鈕
• enable 使畫布為只讀並啟用jSignature按鈕
• isModified 如果修改了jSignature，則返回布爾值true，否則返回false。
• getSettings 返回jSignature實例的可配置設置。
• updateSetting接受三個參數-設置名稱，新值，布爾值（如果更改應影響當前簽名或將來的筆划）。這使您可以更新某些設置，如lineWidth或line color，並使用第三個參數可以將更改應用於現有筆觸。目前，更新對現有筆划的更改僅適用於一些設置，例如顏色。返回更新的值。

如有侵權，請聯系作者刪除！謝謝！