jsignature中文開發的方法

本篇內容介紹了“jsignature中文開發的方法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

注意：

本插件最新版是支持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中文開發的方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！