移動及pc端實現簽名功能

時間 2019-11-10

標籤移動實現簽名功能欄目無線简体版

原文原文鏈接

　　最近公司有一個新的需求，將app的功能所有轉移到h5來作，包括了簽名，動畫等功能。javascript

　　簽名核心使用的就是h5的新屬性，canvans，這裏推薦一個比較好用的jq插件：jSignature，有興趣的能夠去官網查看相關的apicss

　　首先，看html頁面html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>視頻播放</title>
    <style type="text/css">
        body,html{
            width: 100%;
            height: 100%;
            -webkit-overflow-scrolling: touch;
        }
         *{ 
            margin:0;
            padding:0;
            border:0;
        }
        #signCont{
            width: 1000px;
            height: 400px;
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -500px;
            margin-top: -200px;
            border: 2px solid #ccc;
        }
    </style>
    <script src="image/jquery.min.js" type="text/javascript"></script>
    <script src="jSignature.min.js"></script>
</head>
<body ontouchmove="event.preventDefault()">
    <div id="signCont"></div>
</body>
</html>

　　其中的signCont是用來初始化canvans的容器，貼出js代碼java

var dHeight = document.getElementById("signCont").offsetHeight + "px";
        var dWidth = document.getElementById("signCont").offsetWidth ; 
          $("#signCont").jSignature({'UndoButton':false,'height':dHeight,'width':dWidth,'signatureLine':false,'lineWidth':'2','decor-color':'#fff'});

　　參數中的 UndoButton 是用來設置是否顯示清楚上一步的按鈕，signatureLine是該插件默認的一個下劃線，默認爲true,false爲不顯示（親測不成功，因此設置'decor-color'的顏色與背景色一致時，就會將默認的橫線去掉。），lineWidth爲線寬。jquery

　　簽名時畫的canvans圖形還可使用png、jpg等格式將其保存，具體使用方法能夠查看官方文檔及demo，總的來講，改插件適合移動端、pc端，功能強大web

　　連接地址：http://www.jq22.com/demo/jSignature-master201704170038/api