jsignature 中文開發手冊

時間  2019-11-08
標籤 jsignature 中文 開發 手冊 简体版
原文   原文鏈接

2017年5月9日21:23:17，最近比較忙，沒時間寫博客，真的是愈來愈懶來了javascript

github：https://github.com/brinley/jSignaturephp

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

文章最後會帶一個完整的數字簽名的demo，後臺處理php的版本，仍是請看最下面的qq羣號，進入下載，想更多人一塊兒交流，少走點彎路html

請注意使用過的jquery最好版本比較新，個人是jquery2.1.4，jSignature的版本是jSignature v2，由於版本越新，在h5上書寫的效果越流html5

 

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

最後還有一些技巧和我的經驗jquery

 

注意： git

本插件最新版是支持IE8的，測試請放在本地服務器上測試，不要直接打開，由於一些js的文件請求協議不支持windows本地文件協議github

file:// 和http請求的差別ajax

若是不清楚是怎麼請求協議的差別，請不要糾結，直接上本地服務器測試

 

 

基本使用過方法

 <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>

 這個兼容性問題解決

 

方法：

方法名稱 使用方法 說明
clear .jSignature("clear") 清空並重置畫布
getData .jSignature("getData", "base30") 將畫布轉換爲base64編碼的數據字符串，能夠在表單發佈或提交時將其保存爲任何數據庫中的字符串
importData .jSignature("importData",dataurl) 使用從上述getData方法提取的數據URL更新現有的jSignature畫布

 

 選項參數：

 

參數名稱 說明 默認值
width 定義畫布的寬度。 沒有％或px的數值（新版是可使用百分比和px後綴的） 250
height 定義畫布的高度。 沒有％或px的數值（新版是可使用百分比和px後綴的） 150
color 定義畫布上筆畫的顏色。 接受任何顏色十六進制值 #000
background-color 定義畫布的背景顏色。 接受任何顏色十六進制值 #fff
lineWidth 定義線的厚度。 接受任何正數值（也是默認畫布的橫線的畫筆的寬度） 1
cssclass 定義畫布的自定義css類 None

 

導入圖像數據

畫布圖像導入並保存到數據庫後，能夠經過其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

將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自己有三個不一樣的代碼段轉換成一個最小的可部署：:

  1. 準備Canvas元素的代碼。 它包括檢測瀏覽器功能，最大限度地利用div的範圍內的畫布，在須要時使用Flashcanvas設置仿真畫布。
  2. 處理實際簽名捕獲+數據導入/導出API的代碼。 它附加並監聽移動事件處理程序，將數據結構中的筆觸數據存儲起來，處理API調用。
  3. 插件可幫助您獲取方便您的格式的簽名數據，如原始數據座標，圖像，壓縮的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));

 demo下載請去qq羣下載，後面會上傳到羣文件

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程