jsignature 中文開發教學

jSignature通過筆畫的向量輪廓來捕捉簽名。 jSignature 可以輸出 PNG 影象，並且有極強的靈活性。

• github：https://github.com/brinley/jSignature

• http://www.unbolt.net/jSignature/ 一部分英文檔案

本文最後會帶一個完整的數位簽章的demo，後臺處理php的版本，還是請看最下面的qq群號，進入下載，想更多人一起交流，少走點彎路

請注意使用過的jquery最好版本比較新，我的是jquery2.1.4，jSignature的版本是jSignature v2，因為版本越新，在h5上書寫的效果越流。

請注意這個檔案是根據舊版本翻譯加上一些個人經驗修復的

最後還有一些技巧和個人經驗

注意：

本外掛最新版是支援IE8的，測試請放在本地伺服器上測試，不要直接開啟，因為一些js的檔案請求協定不支援windows本地檔案協定

file:// 和http請求的差異

如果不清楚是怎麼請求協定的差異，請不要糾結，直接上本地伺服器測試

基本使用過方法

<div id="signature"></div>
<script type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jSignature.js"></script>

 <script type="text/javascript">
 $(document).ready(function() {
   $("#signature").jSignature();
 });
 </script>

如果只是在html5這樣參照了

需要瀏覽器使用

<div id="signature"></div>
<script type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jSignature.js"></script>

   <!--[if lt IE 9]>
        <script type="text/javascript" src="flashcanvas.js"></script>
        <![endif]-->

 <script type="text/javascript">
 $(document).ready(function() {
   $("#signature").jSignature();
 });
 </script>

這個相容性問題解決

方法：

選項引數：

匯入影象資料

畫布影象匯入並儲存到資料庫後，可以通過其base64編碼的字串輕鬆顯示影象，

要通過jQuery來做，可以使用類似的東西

$("<img class='imported'></img>").attr("src",sig.jSignature('getData', 'base30')).appendTo(sig);

或者直接從伺服器端輸入資料串到img的的src屬性中

<img src="<? echo $datastring ?>" />

您還可以將dataUrl匯入到jSignature畫布中，以便您可以通過以下JavaScript程式碼編輯簽名

$("#signature").jSignature("importData",dataurl);

dataurl是上面使用的相同的資料串。 您可以在下面的演示中通過從其中一個jSignature複製資料字串，然後單擊另一個jSignaure的「匯入資料到畫布」，

並將資料字串貼上到出現的對話方塊中，從而在下面的演示中看到它

giehub官方版本部分

jSignature是一個jQuery外掛，它簡化了瀏覽器視窗中籤名捕獲欄位的建立，允許使用者使用滑鼠，筆或手指繪製簽名。

j簽名將簽名作為筆畫的向量輪廓捕獲。 雖然jSignature也可以匯出偉大的點陣圖（PNG），提取簽名的高度可延伸的行程移動座標（也稱為向量影象）允許更大的靈活性

進行額外的努力（通過平滑和壓力模擬），使得筆畫在螢幕上看起來很漂亮，而這些畫面由閣下繪製。

所有主要的桌面，平板電腦和手機瀏覽器的支援。預設情況下使用HTML5畫布元素。我們依靠基於canvas元素模擬器Flash（flashcanvas）當實際帆布不支援的瀏覽器（Internet Explorer 8節下）。

實時jsignature呈現只有裝置適當的「漂亮的」逼近我們捕獲。捕獲的資料總是相同的-我們儘可能捕捉儘可能多的運動座標。筆觸的繪製不同於瀏覽器的功能，裝置的效率，螢幕大小。

捕獲的簽名的螢幕表示的這種降級和增強是為了確保渲染不會影響捕獲的響應性而進行的。 例如，在緩慢渲染裝置（Android瀏覽器，基於FlashCanvas的Canvas模擬）上，平滑被踢出了一個缺口，以補償捕獲的筆畫座標中的巨大差距 - 捕獲裝置效率低下的結果。 在所有情況下，客戶都會對圖紙的反應和美觀感到高興。

jSignature可以輕鬆地將其自己調入現有樣式的網站。 jSignature自動檢測包裝元素上使用的顏色（文字顏色=筆顏色，背景=背景），並自動選擇「裝飾」（簽名行）的令人愉快的中間色調。 jSignature適用於固定和可變寬度的網頁設計，以及各種大小的螢幕（手機，平板電腦，電腦螢幕），並且當父元素更改大小時自動重新繪製繪圖區域和簽名。

demos here：

http://brinley.github.io/jSignature/

將jSignature新增到您的頁面

檢視原始碼樹中的libs資料夾。 從那裡挑選3個檔案：

1、jSignature.min*.js (「*」表示您有選擇。 您可以選擇常規的以jQuery為中心的構建或特殊的jQuery.NoConflict構建)

2、flashcanvas.js

3、flashcanvas.swf

jSignature取決於（至少最新版）jQuery

如果您不打算支援IE 7和8，則不需要下載FlashCanvas檔案。

請注意，FlashCanvas是兩個檔案的連貫一組，分別是flashcanvas.swf和flashcanvas.js，這兩個檔案必須位於同一個資料夾中。 不要將它們從單獨的資料夾託管，因為flashcanvas.js在與其提供的同一資料夾中查詢flashcanvas.swf。 不要將flashcanvas.js重新命名為其他任何東西，因為它在DOM中通過該名稱查詢自己，以找出從哪裡載入flashcanvas.swf。

jSignature本身有三個不同的程式碼段轉換成一個最小的可部署：:

• 準備Canvas元素的程式碼。 它包括檢測瀏覽器功能，最大限度地利用div的範圍內的畫布，在需要時使用Flashcanvas設定模擬畫布。

• 處理實際簽名捕獲+資料匯入/匯出API的程式碼。 它附加並監聽移動事件處理程式，將資料結構中的筆觸資料儲存起來，處理API呼叫。

• 外掛可幫助您獲取方便您的格式的簽名資料，如原始資料座標，影象，壓縮的url相容字串，SVG。

如果您確定受眾受限於特定的瀏覽器引擎（您可以通過嵌入式瀏覽器小部件部署，使用類似PhoneGap的部件），您可以捲起袖子並將其放在第1部分。 如果你知道你只需要一個匯出/匯入外掛，那麼從最小化的可部署中刪除你不需要的外掛。

更多自定義資料匯出/匯入外掛可以單獨載入，而無需重新設定主要部署。 但是，縮小是有趣和容易的。 只需看看wscript.py檔案，並更改幾行以包含/排除某些部分。

對於「通用」部署場景（包括舊IE的支援），將其新增到您的頁面：

<!-- this, preferably, goes inside head element: -->
<!--[if lt IE 9]>
<script type="text/javascript" src="path/to/flashcanvas.js"></script>
<![endif]-->

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

<!-- you load jquery somewhere before jSignature ... -->
<script src="path/to/jSignature.min.js"></script>
<script>
    $(document).ready(function() {
        $("#signature").jSignature()
    })
</script>

解釋：

• [if lt IE 9]部分載入IE小於9的Flashcanvas庫（僅在IE上支援Flashcanvas，所以沒有任何意義進行功能檢測。）

• 我們標記一個div，其中將建立canvas元素。 任何ID或其他jQuery選擇器都可以。

• 我們載入jSignature外掛。

• 最後，指令碼呼叫指定DIV中的簽名小部件。

API

以下方法暴露在jQuery物件之上：.jSignature（String command，* args）

引數因命令而異。 當提供命令時，命令將是一個帶有jSignature命令的字串。 目前支援的命令：

• init是預設的，假定的動作。 init需要一個引數 - 一個設定物件。 您可以省略命令，並在init中傳遞設定物件。 返回（以傳統的jQuery連結方式）jQuery物件參照應用外掛的元素。

• reset 復位只是清除簽名板，資料儲存（並放回簽名線和其他裝飾）。 返回（以傳統的jQuery連結方式）jQuery物件參照應用外掛的元素。

• clear reset別名，歷史遺留

• getData 接受引數 - 資料格式的名稱。 返回適合資料格式的資料物件

• setData 需要兩個引數 - 資料物件，資料格式名稱。 當資料物件是以data-url模式格式化的字串時，您不需要指定資料dormat名稱。 資料格式名稱（mime）將從data-url字首中隱含。 見下面的例子。 返回（以傳統的jQuery連結方式）jQuery物件參照應用外掛的元素。

• importData setData的別名 ，歷史遺留

• listPlugins 接受一個引數 - 表示要列出的外掛的類別（僅匯出，此時支援的匯入）的字串。 返回字串陣列。

• disable 使畫布唯讀，並禁用jSignature按鈕

• enable 使畫布唯讀，並啟用jSignature按鈕

• isModified 如果jSignature被修改，返回一個布林值true，否則返回false。

• getSettings 返回jSignature範例的可設定設定。

• updateSetting 需要三個引數 - 設定名稱，新值，布林值，如果更改應該影響當前簽名或將來的筆畫。 這允許您更新某些設定，如lineWidth或線條顏色，使用第三個引數可以使更改適用於現有筆畫。 目前，更新現有筆畫的更改僅適用於像顏色這樣的幾個設定。 返回更新的值

使用範例：

var $sigdiv = $("#signature")
$sigdiv.jSignature() //初始化 jSignature 外掛
// after some doodling...
$sigdiv.jSignature("reset") // 清除畫布並在其上重新裝飾。
// 將簽名作為SVG並在瀏覽器中呈現SVG。
// （!!!來自IMG元素的內聯SVG渲染在所有瀏覽器中都不起作用!!!）
//這個匯出外掛返回一個陣列[mimetype，base64編碼的SVG的字串的簽名筆畫]
var datapair = $sigdiv.jSignature("getData", "svgbase64") 
var i = new Image()
i.src = "data:" + datapair[0] + "," + datapair[1] 
$(i).appendTo($("#someelement")) // append the image (SVG) to DOM.

// 獲取簽名為「base30」資料對
// 陣列[mimetype，jSignature的自定義Base30壓縮格式的字串]
datapair = $sigdiv.jSignature("getData","base30") 
// 將資料重新匯入jSignature。
// 匯入外掛瞭解資料網址格式的字串，如「data：mime; encoding，data」
$sigdiv.jSignature("setData", "data:" + datapair.join(","))

資料匯入/匯出（和外掛）

以下外掛（資料格式）是主線j簽名的一部分，可分發：

• default （僅限EXPORT ONLY）（BITMAP）資料格式與輸出格式j相容，在早期版本中生成的getData被呼叫時不帶引數。 預設情況下，預設情況下（預設情況下）呼叫$ obj.jSignature（「getData」）資料格式是Canvas - data-url格式化的base64編碼（可能的PNG）點陣圖資料，如下所示 ：data：image / png; base64，i1234lkj123; k4; l1j34l1kj3j ...此匯出呼叫返回單個資料網址格式的字串。

• native （匯出和匯入）（VECTOR）（VECTOR）資料格式是繪製筆畫的自定義表示形式，作為具有道具.x，.y的物件陣列，每個物件都是一個陣列。這個JavaScript物件結構是每個繪圖筆畫儲存在jSignature中的實際資料結構。該結構專門用於收集筆觸資料點的速度和效率。 （儘管它有一些反直覺，章魚式的結構，它（a）允許快速堆積雙軸座標，而不需要為每個資料點建立Point物件，（b）提供非常簡單的迴圈，基於資料的處理）。雖然您可以JSONify，它傳遞，解析，從此渲染，它可能不是最有效的方式來儲存資料，因為內部格式可能會改變其他主要版本的jSignature。我建議將base30格式視為直接的，但緊湊的等同於「native」-as-JSON。這個資料適用於執行統計資訊（尺寸，畫布上的簽名位置）和編輯筆畫（例如允許「撤消最後一個筆畫」）。

• base30 （別名image / jSignature; base30）（EXPORT AND IMPORT）（VECTOR）（VECTOR）（VECTOR）（VECTOR）（VECTOR）（VECTOR）資料格式是一種基於Base64的壓縮格式，用於荒謬的緊湊性和本機url相容性。 它是壓縮成所有向量的緊湊字串表示形式的「本機」資料結構。 extras資料夾中提供了將此格式解壓縮為可呈現格式（SVG，語言本機座標陣列）的程式碼範例（.Net，PHP，Ruby）。 將資料傳送到伺服器的一種可能的方法是JSONP，其具有不超過2000個字元的實際URL長度限制（由IE強加）。 這種壓縮格式是本地URL相容的，無需重新編碼，但適合大多數非複雜簽名的2000個字元。

• svg （別名image / svg + xml）（僅EXPORT ONLY）（VECTOR）（VECTOR）資料格式生成SVG影象（SVG XML文字）的簽名。 所有筆畫都被去噪和平滑。 這種格式是「易於檢視」和「高度可延伸」之間的良好媒介。 目前大多數瀏覽器都支援檢視SVG，但是，這種格式可以無限縮放和增強列印。 資料是文字，容易儲存和傳輸。 對jSignature（「getData」，「svg」）的呼叫返回一個陣列，形式為「」image / svg + xml「，」svg xml here「]。

• svgbase64 （別名image / svg + xml; base64）（僅限EXPORT ONLY）（VECTOR）與「svg」外掛相同，但使用base64編碼壓縮SVG XML文字。 雖然現在有許多瀏覽器已經內建了base64編碼器（btoa（）），但有些則像Internet Explorer那樣沒有。 該外掛具有自己的（短而高效）的基於軟體的base64編碼器的副本，該編碼器在缺少btoa（）的瀏覽器上被呼叫。 對jSignature（「getData」，「svgbase64」）的呼叫返回一個[「image / svg + xml; base64」，「base64編碼的svg xml這裡」）的陣列。 這個雙元件陣列很容易變成data-url格式的字串（「data：」+ data.join（「，」）），或者轉換成args，並作為表單值傳遞給伺服器。

• image （EXPORT ONLY）（BITMAP）資料格式與上面的「預設」資料格式基本相同，但是被解析，以便mimetype和資料是類似於「svg」匯出產生的陣列結構中的單獨物件。 範例（縮短）[「image / png; base64」，「i123i412i341jijalsdfjijl234123i ...」]。 因為影象匯出過濾器取決於（有點薄片）的瀏覽器支援並且拾取不必要的資料，建議僅將其用於演示和開發。

選擇匯出/儲存格式

我知道你是想從jSignature想要「影象」，但是，請控制自己，並遠離。 相反，考慮在後期製作伺服器端捕獲「base30」或「svg」資料並增強+渲染。

如果您匯出「點陣圖」，影象將保留實際的繪圖顏色，大小，缺陷，並且最重要的是可能無法在所有瀏覽器上執行。

• 裝飾（簽名線）將在影象上。 如果jSignature被設計為深色背景+光筆顏色，那麼您將在影象上獲得什麼 - 深色背景，覆蓋灰色簽名線的輕圖紙。 這張圖片在列印時幾乎沒有用。 如果您的背景與筆的強度相同（例如，藍色為紅色），則這種情況會更糟，在這種情況下，當黑白列印時，影象只是一個深灰色的矩形。 如果您更改頁面顏色，捕獲的影象現在開始穿上這些顏色。

• Android 1.6 -2.2（2.3？）不支援canvas.toDataURL方法 - 點陣圖匯出功能。

• 小螢幕（手機）產生微小的醜陋的點陣圖。

• 畫布匯出的點陣圖與向量相比尺寸為GARGANTUAN，因為它保留了所有中間陰影和背景畫素。

如果你想強制自己只能使用白色簽名捕獲網頁風格之上的黑色，請使用點陣圖匯出。 如果你想讓你的資料庫管理員尖叫，因為所有點陣圖資料的資料庫的備份需要一天以上，請使用點陣圖匯出。 如果您希望您的銷售/業務部門尖叫您，因為您的簽名捕獲格式無法輕鬆整合到新的精心設計的wizbang產品/服務中，請使用點陣圖匯出。 如果您想解釋為什麼選擇的siganture格式匯出不適用於所有目標平臺，請使用點陣圖匯出。 如果你想現在採取簡單的路線，並使IT人員在您被解僱之後進入，將ImageMagic智慧卡應用於您決定收集的彩色畫素混亂上的困難任務，請使用點陣圖匯出格式。

如果使用捕獲的簽名與「業務」或「列印」或「多個演示場所」有任何關係，則使用「base30」或「svg」資料等向量格式，並在後期製作中增強+渲染。 「extras」資料夾中可以找到解壓縮和樣本，基本的渲染程式碼（.Net，截至2012年2月的PHP）。 您將使用這些為核心，為您自己的渲染邏輯提供可迴圈的座標資料陣列。

Events（事件）

jSignature初始化的dom元素在筆畫完成後立即發出「change」事件，並將其新增到記憶體中。 （換句話說，當使用者完成繪製每個筆畫時，如果使用者繪製3筆畫，則每次筆畫完成後，此事件將發出3次）。

以下是您如何繫結到該事件：

$("#signature").bind('change', function(e){ /* 'e.target' will refer to div with "#signature" */ })

事件通過「執行緒」（setTimeout（...，3））非同步發出，因此您不需要將事件處理程式包裝到任何型別的「執行緒」中，因為jSignature小部件將繼續執行，並且不會等待 你要完成你的自定義事件處理程式邏輯。

個人經驗和一個完整的php版本demo

html部分

//jquery.moblie會和jsignature有衝突，不知道是版本問題，還是程式碼程式碼衝突
<script src="__PUBLIC__/hplus/js/jquery.min.js"></script>
<script src="__PUBLIC__/sign/jSignature.min.js"></script>
<script src="__PUBLIC__/hplus/js/plugins/pace/pace.min.js"></script>
<!--<script src="__PUBLIC__/hplus/js/bootstrap.min.js?v=3.3.6"></script>-->
<link href="__PUBLIC__/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<script src="__PUBLIC__/hplus/js/plugins/layer/layer.min.js"></script>



<style type="text/css"> 
    .zx11{
        border: 1px;
        border-color: red;
    }
    #signatureparent {
        color:black;
        background-color:darkgrey;
    }
    #signature {
        border: 2px dotted black;

    }

</style>

<div class="container">
    <div id="signatureparent">
        <div id="signature"></div>
    </div>
    <br>
    <button type="button" class="btn btn-primary btn-block" id="save">儲存</button>
    <button type="button" class="btn btn-default btn-block" id="clear">清除</button>
</div>

<script>
    $(document).ready(function () {

        var arguments = {
            width: '100%',
            height: '300px',
            cssclass: 'zx11',
            signatureLine: false,//去除預設畫布上那條橫線
            lineWidth: '5'
        };
        $("#signature").jSignature(arguments);

        $('#clear').click(function () {
            $("#signature").jSignature("reset");
        });
        $('#save').click(function () {
            //標準格式但是base64會被tp框架過濾，所不校驗，但是jSignature預設是使用png
            var datapair = $("#signature").jSignature("getData", "image");
            var i = new Image();
            i.src = "data:" + datapair[0] + "," + datapair[1];
            i.image = datapair[1];
            var requestTag;
            requestTag = '{$Think.get.identify}';
            console.log(i.image);
//            console.log(i.src);

            //詢問框
            layer.confirm("如果確認無誤，請確認<br><img src=" + i.src + " height='100px' width='100px' />", {
                btn: ['確認', '取消'] //按鈕
            }, function () {


                $.ajax({
                    url: "/app.php?m={$Think.MODULE_NAME}&a={$Think.ACTION_NAME}",
                    //dataType: "json",                    contentType: "application/json; charset=utf-8",
                    data: "{\"identify\":\"" + requestTag + "\",\"image_data\":\"" + encodeURIComponent(i.image) + "\"}",//避免base64長度過大，json傳輸
                    type: "post",
                    cache: false,
                    success: function (msg) {
                        if (msg.code === 1) {
                            layer.msg('上傳成功');
                        } else {
                            layer.msg('上傳失敗,請再次簽名！');
                        }
                    }
                });
            }, function () {
                layer.msg('取消成功');
            });



        });
    });
</script>

php部分

$image_data = json_decode(file_get_contents('php://input'), true); //只能這樣接收
$data = rawurldecode($image_data['image_data']);

$file_name = time().'.png'; //必須png
$a = file_put_contents($file_name, base64_decode($data));

【相關推薦：、】

以上就是jsignature 中文開發教學的詳細內容，更多請關注TW511.COM其它相關文章！