單純的資訊年代

sungnoone

2014-08-08

jQuery plugin - Signature Pad

jQuery plugin - Signature Pad

一、甚麼是Sigunature Pad?

Signature Pad是 jQuery 的 plugin。使用 HTML5 的 canvas 元件建立簽名板時，利用此插件，可使簽名板開發更簡便迅速，不再被line to、move to、stroke之類繁雜指令，搞到頭暈眼花。在行動平台上的表現，效果亦相當順暢良好。

感謝 Thomas J Bradley 的無私奉獻，相當難能可貴的是這位作者，還將此元件的 optios、API methods 一一詳列說明於網站上，不似一般開源專案如衛生紙般薄薄的說明。

有興趣可以到這個網址下載，並看看說明。

http://thomasjbradley.ca/lab/signature-pad/

 

 

二、使用方法

主要有3個檔案須加入網頁中。

jquery.signaturepad.js

json2.min.js

flashcanvas.js

另外也可套用作者設計好的樣式。

jquery.signaturepad.css

(基本樣板)

把這段加入 html。

 

<form method="post" action="" class="sigPad">
	<div class="sigPad signed">
		<div class="sigWrapper">
			<canvas class="pad" width="600" height="300"></canvas>
		</div>
	</div>
</form>

 

以下加入 javascript。 

$("document").ready(function(){
    api = $(".sigPad").signaturePad({drawOnly:true, lineWidth:0});
});

 

ASUS Fonepad ME371MG

image

Signature Pad 也可以透過給予座標數字，重繪顯示於畫面中。

例如：

$("document").ready(function(){
    var sigAry = [{"lx":112,"ly":28,"mx":112,"my":27},
                    {"lx":112,"ly":27,"mx":112,"my":28},
                    {"lx":116,"ly":27,"mx":112,"my":27},
                    {"lx":119,"ly":28,"mx":116,"my":27},
                    {"lx":122,"ly":28,"mx":119,"my":28},
                    {"lx":131,"ly":32,"mx":122,"my":28},
                    {"lx":154,"ly":47,"mx":131,"my":32},
                    {"lx":165,"ly":57,"mx":154,"my":47},
                    {"lx":167,"ly":58,"mx":165,"my":57},
                    {"lx":181,"ly":70,"mx":167,"my":58},
                    {"lx":197,"ly":85,"mx":181,"my":70},
                    {"lx":206,"ly":93,"mx":197,"my":85},
                    {"lx":209,"ly":95,"mx":206,"my":93},
                    {"lx":211,"ly":97,"mx":209,"my":95},
                    {"lx":217,"ly":100,"mx":211,"my":97},
                    {"lx":218,"ly":102,"mx":217,"my":100}]
    api = $(".sigPad").signaturePad({drawOnly:true, lineWidth:0}).regenerate(sigAry);
});

便可以產生如下線條了。

image

如果要獲取路徑座標資訊，可以透過 getSigunatureString() 方法取得。

例如：

我們在網頁上放置一個按鈕觸發獲取事件，及一個 ID 為 message 的 <div> 元素，用來顯示獲取的座標字串。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <meta name="msapplication-tap-highlight" content="no" />
        <script type="text/javascript" src="cordova.js"></script>
        <link rel="stylesheet" href="css/jquery.mobile-1.4.2.css">
        <link rel="stylesheet" href="css/jquery.mobile.structure-1.4.2.css">
        <link rel="stylesheet" href="css/jquery.mobile.theme-1.4.2.css">
        <link rel="stylesheet" href="css/jquery.mobile.inline-svg-1.4.2.css">
        <link rel="stylesheet" href="css/jquery.mobile.inline-png-1.4.2.css">
        <link rel="stylesheet" href="css/jquery.mobile.icons-1.4.2.css">
        <link rel="stylesheet" href="css/jquery.mobile.external-png-1.4.2.css">
        <link rel="stylesheet" href="css/jquery.signaturepad.css">
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
        <script src="js/jquery.signaturepad.js"></script>
        <script src="js/json2.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <title>Touch Paint v1</title>
    </head>
    <body>
        <div data-role="page" id="page_main" style="margin-top: 20px">
            <div data-role="header">
                <h1>Touch Paint</h1>
            </div>
            <div data-role="content">
                <div id="btn_group">
                    <a href="#" data-role="button" data-inline="true" onclick="showSig()">Show Signature</a>
                </div>
                <div>
                    <form method="post" action="" class="sigPad">
                        <div class="sigPad signed">
                            <div class="sigWrapper">
                                <canvas class="pad" width="600" height="300"></canvas>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div id="message"></div>
         </div>
    </body>
</html>

 

在 javascript 加上 showSig() 自訂函式。

var api = null;

$("document").ready(function(){
    api = $(".sigPad").signaturePad({drawOnly:true, lineWidth:0});

});

/*=======================================================================*/

function showSig(){
    var posAry = api.getSignatureString();
    $("#message").append("<p>"+posAry+"</p>");
}

 

畫完之後，按下按鈕顯示經過路徑資訊，以JSON格式字串呈現。

image

那如果要輸出以供傳送到伺服器上或其他頁面使用呢? Sigunature Pad 提供兩種輸出方法。

一種就是前面提的 getSigunatureString() 輸出 JSON 格式字串保存。

另一 getSigunatureImage() 產生 base64 編碼的 png。

我們在網頁上另外放置一個按鈕觸發 getSigunatureImage() 方法。同時加入 <img /> 元素，讓編碼字串塞到 src 屬性值內，就可以完整呈現 PNG 圖片。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <meta name="msapplication-tap-highlight" content="no" />
    <script type="text/javascript" src="cordova.js"></script>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.2.css">
    <link rel="stylesheet" href="css/jquery.mobile.structure-1.4.2.css">
    <link rel="stylesheet" href="css/jquery.mobile.theme-1.4.2.css">
    <link rel="stylesheet" href="css/jquery.mobile.inline-svg-1.4.2.css">
    <link rel="stylesheet" href="css/jquery.mobile.inline-png-1.4.2.css">
    <link rel="stylesheet" href="css/jquery.mobile.icons-1.4.2.css">
    <link rel="stylesheet" href="css/jquery.mobile.external-png-1.4.2.css">
    <link rel="stylesheet" href="css/jquery.signaturepad.css">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
    <script src="js/jquery.signaturepad.js"></script>
    <script src="js/json2.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <title>Touch Paint v1</title>
</head>
<body>
<div data-role="page" id="page_main" style="margin-top: 20px">
    <div data-role="header">
        <h1>Touch Paint</h1>
    </div>
    <div data-role="content">
        <div id="btn_group">
            <a href="#" data-role="button" data-inline="true" onclick="showSig()">Show Signature</a>
            <a href="#" data-role="button" data-inline="true" onclick="sig2Img()">Signature to Image</a>
        </div>
        <div>
            <form method="post" action="" class="sigPad">
                <div class="sigPad signed">
                    <div class="sigWrapper">
                        <canvas class="pad" width="600" height="300"></canvas>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div>
        <img id="redraw" src="" />
    </div>
    <div id="message"></div>
</div>
</body>
</html>

 

在 javascript 加上 sig2Img()。

var api = null;

$("document").ready(function(){
    api = $(".sigPad").signaturePad({drawOnly:true, lineWidth:0});
});

/*=======================================================================*/

function showSig(){
    var posAry = api.getSignatureString();
    $("#message").append("<p>"+posAry+"</p>");
}

function sig2Img(){
    var img = api.getSignatureImage();
    $("#message").append("<p>"+img+"</p>");
    $("#redraw").attr("src",img);
}

 

測試。

image

開發者可以 JSON格式或 base64 code 傳入後台儲存。

至於伺服端如何將 JSON 轉換成 image，作者也針對不同伺服器端語言，提供解決類別庫，C#也有。

image

如果要改變 pad 的大小，直接在 <canvas /> 裡設定 width、height屬性即可。

image

如果有使用作者預設的CSS，可以直接修改。

image

image

<canvas /> 屬性設定值要略小於 預設 CSS 裡的設定。

 

 

三、options

可以用來改變 Signature Pad 的一些預設選項包含外觀。例如背景、顏色大小、筆觸大小顏色、onDraw call back function等等...

每一組 option 都是成對的 key/value JSON 格式。

image

所有可設定的 option ，在作者網站上都有羅列說明。

http://thomasjbradley.ca/lab/signature-pad/#options-ref

 

 

四、API

作者也提供幾個實作方法，供輸出入值，或簡單作業。

http://thomasjbradley.ca/lab/signature-pad/#api-ref

常用如下

regenerate：透過輸入座標繪出線條。

clearCanvas：清除繪布。

getSignature：取得路徑資訊，傳回 JSON 格式的陣列物件。

getSignatureString：取得路徑資訊，傳回 JSON 格式的字串。

getSignatureImage：路徑轉為PNG，傳回以 base64 編碼 PNG 的字串。

 

 

五、附上三種不同平台表現擷圖。

iPad2-iOS7

image

ASUS Fonepad ME371MG-Android4.1

image

桌機-Chrome

image