jsignature中文開(kāi)發(fā)的方法

本篇內(nèi)容介紹了“jsignature中文開(kāi)發(fā)的方法”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

注意：

本插件最新版是支持IE8的，測(cè)試請(qǐng)放在本地服務(wù)器上測(cè)試，不要直接打開(kāi)，因?yàn)橐恍﹋s的文件請(qǐng)求協(xié)議不支持windows本地文件協(xié)議

file:// 和http請(qǐng)求的差異

如果不清楚是怎么請(qǐng)求協(xié)議的差異，請(qǐng)不要糾結(jié)，直接上本地服務(wù)器測(cè)試

基本使用過(guò)方法

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

這個(gè)兼容性問(wèn)題解決

方法：

選項(xiàng)參數(shù)：

導(dǎo)入圖像數(shù)據(jù)

畫(huà)布圖像導(dǎo)入并保存到數(shù)據(jù)庫(kù)后，可以通過(guò)其base64編碼的字符串輕松顯示圖像，

要通過(guò)jQuery來(lái)做，可以使用類(lèi)似的東西

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

或者直接從服務(wù)器端輸入數(shù)據(jù)串到img的的src屬性中

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

您還可以將dataUrl導(dǎo)入到j(luò)Signature畫(huà)布中，以便您可以通過(guò)以下JavaScript代碼編輯簽名

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

dataurl是上面使用的相同的數(shù)據(jù)串。 您可以在下面的演示中通過(guò)從其中一個(gè)jSignature復(fù)制數(shù)據(jù)字符串，然后單擊另一個(gè)jSignaure的“導(dǎo)入數(shù)據(jù)到畫(huà)布”，

并將數(shù)據(jù)字符串粘貼到出現(xiàn)的對(duì)話框中，從而在下面的演示中看到它

giehub官方版本部分

jSignature是一個(gè)jQuery插件，它簡(jiǎn)化了瀏覽器窗口中簽名捕獲字段的創(chuàng)建，允許用戶(hù)使用鼠標(biāo)，筆或手指繪制簽名。

j簽名將簽名作為筆畫(huà)的向量輪廓捕獲。 雖然jSignature也可以導(dǎo)出偉大的位圖（PNG），提取簽名的高度可擴(kuò)展的行程移動(dòng)坐標(biāo)（也稱(chēng)為矢量圖像）允許更大的靈活性

進(jìn)行額外的努力（通過(guò)平滑和壓力模擬），使得筆畫(huà)在屏幕上看起來(lái)很漂亮，而這些畫(huà)面由閣下繪制。

所有主要的桌面，平板電腦和手機(jī)瀏覽器的支持。默認(rèn)情況下使用HTML5畫(huà)布元素。我們依靠基于canvas元素模擬器Flash（flashcanvas）當(dāng)實(shí)際帆布不支持的瀏覽器（Internet Explorer 8節(jié)下）。

實(shí)時(shí)jsignature呈現(xiàn)只有裝置適當(dāng)?shù)摹捌恋摹北平覀儾东@。捕獲的數(shù)據(jù)總是相同的-我們盡可能捕捉盡可能多的運(yùn)動(dòng)坐標(biāo)。筆觸的繪制不同于瀏覽器的功能，設(shè)備的效率，屏幕大小。

捕獲的簽名的屏幕表示的這種降級(jí)和增強(qiáng)是為了確保渲染不會(huì)影響捕獲的響應(yīng)性而進(jìn)行的。 例如，在緩慢渲染設(shè)備（Android瀏覽器，基于FlashCanvas的Canvas仿真）上，平滑被踢出了一個(gè)缺口，以補(bǔ)償捕獲的筆畫(huà)坐標(biāo)中的巨大差距 - 捕獲設(shè)備效率低下的結(jié)果。 在所有情況下，客戶(hù)都會(huì)對(duì)圖紙的反應(yīng)和美觀感到高興。

jSignature可以輕松地將其自己調(diào)入現(xiàn)有樣式的網(wǎng)站。 jSignature自動(dòng)檢測(cè)包裝元素上使用的顏色（文字顏色=筆顏色，背景=背景），并自動(dòng)選擇“裝飾”（簽名行）的令人愉快的中間色調(diào)。 jSignature適用于固定和可變寬度的網(wǎng)頁(yè)設(shè)計(jì)，以及各種大小的屏幕（手機(jī)，平板電腦，電腦屏幕），并且當(dāng)父元素更改大小時(shí)自動(dòng)重新繪制繪圖區(qū)域和簽名。

demos here：

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

將jSignature添加到您的頁(yè)面

查看源代碼樹(shù)中的libs文件夾。 從那里挑選3個(gè)文件：

1、jSignature.min*.js (“*”表示您有選擇。 您可以選擇常規(guī)的以jQuery為中心的構(gòu)建或特殊的jQuery.NoConflict構(gòu)建)

2、flashcanvas.js

3、flashcanvas.swf

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

如果您不打算支持IE 7和8，則不需要下載FlashCanvas文件。

請(qǐng)注意，F(xiàn)lashCanvas是兩個(gè)文件的連貫一組，分別是flashcanvas.swf和flashcanvas.js，這兩個(gè)文件必須位于同一個(gè)文件夾中。 不要將它們從單獨(dú)的文件夾托管，因?yàn)閒lashcanvas.js在與其提供的同一文件夾中查找flashcanvas.swf。 不要將flashcanvas.js重命名為其他任何東西，因?yàn)樗贒OM中通過(guò)該名稱(chēng)查找自己，以找出從哪里加載flashcanvas.swf。

jSignature本身有三個(gè)不同的代碼段轉(zhuǎn)換成一個(gè)最小的可部署：:

• 準(zhǔn)備Canvas元素的代碼。 它包括檢測(cè)瀏覽器功能，最大限度地利用div的范圍內(nèi)的畫(huà)布，在需要時(shí)使用Flashcanvas設(shè)置仿真畫(huà)布。

• 處理實(shí)際簽名捕獲+數(shù)據(jù)導(dǎo)入/導(dǎo)出API的代碼。 它附加并監(jiān)聽(tīng)移動(dòng)事件處理程序，將數(shù)據(jù)結(jié)構(gòu)中的筆觸數(shù)據(jù)存儲(chǔ)起來(lái)，處理API調(diào)用。

• 插件可幫助您獲取方便您的格式的簽名數(shù)據(jù)，如原始數(shù)據(jù)坐標(biāo)，圖像，壓縮的url兼容字符串，SVG。

如果您確定受眾受限于特定的瀏覽器引擎（您可以通過(guò)嵌入式瀏覽器小部件部署，使用類(lèi)似PhoneGap的部件），您可以卷起袖子并將其放在第1部分。 如果你知道你只需要一個(gè)導(dǎo)出/導(dǎo)入插件，那么從最小化的可部署中刪除你不需要的插件。

更多自定義數(shù)據(jù)導(dǎo)出/導(dǎo)入插件可以單獨(dú)加載，而無(wú)需重新設(shè)置主要部署。 但是，縮小是有趣和容易的。 只需看看wscript.py文件，并更改幾行以包含/排除某些部分。

對(duì)于“通用”部署場(chǎng)景（包括舊IE的支持），將其添加到您的頁(yè)面：

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

解釋?zhuān)?/p>

• [if lt IE 9]部分加載IE小于9的Flashcanvas庫(kù)（僅在IE上支持Flashcanvas，所以沒(méi)有任何意義進(jìn)行功能檢測(cè)。）

• 我們標(biāo)記一個(gè)div，其中將創(chuàng)建canvas元素。 任何ID或其他jQuery選擇器都可以。

• 我們加載jSignature插件。

• 最后，腳本調(diào)用指定DIV中的簽名小部件。

API

以下方法暴露在jQuery對(duì)象之上：.jSignature（String command，* args）

參數(shù)因命令而異。 當(dāng)提供命令時(shí)，命令將是一個(gè)帶有jSignature命令的字符串。 目前支持的命令：

• init是默認(rèn)的，假定的動(dòng)作。 init需要一個(gè)參數(shù) - 一個(gè)設(shè)置對(duì)象。 您可以省略命令，并在init中傳遞設(shè)置對(duì)象。 返回（以傳統(tǒng)的jQuery鏈接方式）jQuery對(duì)象引用應(yīng)用插件的元素。

• reset 復(fù)位只是清除簽名板，數(shù)據(jù)存儲(chǔ)（并放回簽名線和其他裝飾）。 返回（以傳統(tǒng)的jQuery鏈接方式）jQuery對(duì)象引用應(yīng)用插件的元素。

• clear reset別名，歷史遺留

• getData 接受參數(shù) - 數(shù)據(jù)格式的名稱(chēng)。 返回適合數(shù)據(jù)格式的數(shù)據(jù)對(duì)象

• setData 需要兩個(gè)參數(shù) - 數(shù)據(jù)對(duì)象，數(shù)據(jù)格式名稱(chēng)。 當(dāng)數(shù)據(jù)對(duì)象是以data-url模式格式化的字符串時(shí)，您不需要指定數(shù)據(jù)dormat名稱(chēng)。 數(shù)據(jù)格式名稱(chēng)（mime）將從data-url前綴中隱含。 見(jiàn)下面的例子。 返回（以傳統(tǒng)的jQuery鏈接方式）jQuery對(duì)象引用應(yīng)用插件的元素。

• importData  setData的別名 ，歷史遺留

• listPlugins 接受一個(gè)參數(shù) - 表示要列出的插件的類(lèi)別（僅導(dǎo)出，此時(shí)支持的導(dǎo)入）的字符串。 返回字符串?dāng)?shù)組。

• disable 使畫(huà)布只讀，并禁用jSignature按鈕

• enable 使畫(huà)布只讀，并啟用jSignature按鈕

• isModified 如果jSignature被修改，返回一個(gè)布爾值true，否則返回false。

• getSettings 返回jSignature實(shí)例的可配置設(shè)置。

• updateSetting 需要三個(gè)參數(shù) - 設(shè)置名稱(chēng)，新值，布爾值，如果更改應(yīng)該影響當(dāng)前簽名或?qū)?lái)的筆畫(huà)。 這允許您更新某些設(shè)置，如lineWidth或線條顏色，使用第三個(gè)參數(shù)可以使更改適用于現(xiàn)有筆畫(huà)。 目前，更新現(xiàn)有筆畫(huà)的更改僅適用于像顏色這樣的幾個(gè)設(shè)置。 返回更新的值

使用實(shí)例：

var $sigdiv = $("#signature")
$sigdiv.jSignature() //初始化 jSignature 插件
// after some doodling...
$sigdiv.jSignature("reset") // 清除畫(huà)布并在其上重新裝飾。
// 將簽名作為SVG并在瀏覽器中呈現(xiàn)SVG。
// （!!!來(lái)自IMG元素的內(nèi)聯(lián)SVG渲染在所有瀏覽器中都不起作用!!!）
//這個(gè)導(dǎo)出插件返回一個(gè)數(shù)組[mimetype，base64編碼的SVG的字符串的簽名筆畫(huà)]
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”數(shù)據(jù)對(duì)
// 數(shù)組[mimetype，jSignature的自定義Base30壓縮格式的字符串]
datapair = $sigdiv.jSignature("getData","base30") 
// 將數(shù)據(jù)重新導(dǎo)入jSignature。
// 導(dǎo)入插件了解數(shù)據(jù)網(wǎng)址格式的字符串，如“data：mime; encoding，data”
$sigdiv.jSignature("setData", "data:" + datapair.join(","))

數(shù)據(jù)導(dǎo)入/導(dǎo)出（和插件）

以下插件（數(shù)據(jù)格式）是主線j簽名的一部分，可分發(fā)：

• default （僅限EXPORT ONLY）（BITMAP）數(shù)據(jù)格式與輸出格式j(luò)兼容，在早期版本中生成的getData被調(diào)用時(shí)不帶參數(shù)。 默認(rèn)情況下，默認(rèn)情況下（默認(rèn)情況下）調(diào)用$ obj.jSignature（“getData”）數(shù)據(jù)格式是Canvas - data-url格式化的base64編碼（可能的PNG）位圖數(shù)據(jù)，如下所示 ：data：image / png; base64，i1234lkj123; k4; l1j34l1kj3j ...此導(dǎo)出調(diào)用返回單個(gè)數(shù)據(jù)網(wǎng)址格式的字符串。

• native （導(dǎo)出和導(dǎo)入）（VECTOR）（VECTOR）數(shù)據(jù)格式是繪制筆畫(huà)的自定義表示形式，作為具有道具.x，.y的對(duì)象數(shù)組，每個(gè)對(duì)象都是一個(gè)數(shù)組。這個(gè)JavaScript對(duì)象結(jié)構(gòu)是每個(gè)繪圖筆畫(huà)存儲(chǔ)在jSignature中的實(shí)際數(shù)據(jù)結(jié)構(gòu)。該結(jié)構(gòu)專(zhuān)門(mén)用于收集筆觸數(shù)據(jù)點(diǎn)的速度和效率。 （盡管它有一些反直覺(jué)，章魚(yú)式的結(jié)構(gòu)，它（a）允許快速堆積雙軸坐標(biāo)，而不需要為每個(gè)數(shù)據(jù)點(diǎn)創(chuàng)建Point對(duì)象，（b）提供非常簡(jiǎn)單的循環(huán)，基于數(shù)據(jù)的處理）。雖然您可以JSONify，它傳遞，解析，從此渲染，它可能不是最有效的方式來(lái)存儲(chǔ)數(shù)據(jù)，因?yàn)閮?nèi)部格式可能會(huì)改變其他主要版本的jSignature。我建議將base30格式視為直接的，但緊湊的等同于“native”-as-JSON。這個(gè)數(shù)據(jù)適用于運(yùn)行統(tǒng)計(jì)信息（尺寸，畫(huà)布上的簽名位置）和編輯筆畫(huà)（例如允許“撤消最后一個(gè)筆畫(huà)”）。

• base30 （別名image / jSignature; base30）（EXPORT AND IMPORT）（VECTOR）（VECTOR）（VECTOR）（VECTOR）（VECTOR）（VECTOR）數(shù)據(jù)格式是一種基于Base64的壓縮格式，用于荒謬的緊湊性和本機(jī)url兼容性。 它是壓縮成所有向量的緊湊字符串表示形式的“本機(jī)”數(shù)據(jù)結(jié)構(gòu)。 extras文件夾中提供了將此格式解壓縮為可呈現(xiàn)格式（SVG，語(yǔ)言本機(jī)坐標(biāo)數(shù)組）的代碼示例（.Net，PHP，Ruby）。 將數(shù)據(jù)傳送到服務(wù)器的一種可能的方法是JSONP，其具有不超過(guò)2000個(gè)字符的實(shí)際URL長(zhǎng)度限制（由IE強(qiáng)加）。 這種壓縮格式是本地URL兼容的，無(wú)需重新編碼，但適合大多數(shù)非復(fù)雜簽名的2000個(gè)字符。

• svg （別名image / svg + xml）（僅EXPORT ONLY）（VECTOR）（VECTOR）數(shù)據(jù)格式生成SVG圖像（SVG XML文本）的簽名。 所有筆畫(huà)都被去噪和平滑。 這種格式是“易于查看”和“高度可擴(kuò)展”之間的良好媒介。 目前大多數(shù)瀏覽器都支持查看SVG，但是，這種格式可以無(wú)限縮放和增強(qiáng)打印。 數(shù)據(jù)是文本，容易存儲(chǔ)和傳輸。 對(duì)jSignature（“getData”，“svg”）的調(diào)用返回一個(gè)數(shù)組，形式為“”image / svg + xml“，”svg xml here“]。

• svgbase64 （別名image / svg + xml; base64）（僅限EXPORT ONLY）（VECTOR）與“svg”插件相同，但使用base64編碼壓縮SVG XML文本。 雖然現(xiàn)在有許多瀏覽器已經(jīng)內(nèi)置了base64編碼器（btoa（）），但有些則像Internet Explorer那樣沒(méi)有。 該插件具有自己的（短而高效）的基于軟件的base64編碼器的副本，該編碼器在缺少btoa（）的瀏覽器上被調(diào)用。 對(duì)jSignature（“getData”，“svgbase64”）的調(diào)用返回一個(gè)[“image / svg + xml; base64”，“base64編碼的svg xml這里”）的數(shù)組。 這個(gè)雙組件數(shù)組很容易變成data-url格式的字符串（“data：”+ data.join（“，”）），或者轉(zhuǎn)換成args，并作為表單值傳遞給服務(wù)器。

• image （EXPORT ONLY）（BITMAP）數(shù)據(jù)格式與上面的“默認(rèn)”數(shù)據(jù)格式基本相同，但是被解析，以便mimetype和數(shù)據(jù)是類(lèi)似于“svg”導(dǎo)出產(chǎn)生的數(shù)組結(jié)構(gòu)中的單獨(dú)對(duì)象。 示例（縮短）[“image / png; base64”，“i123i412i341jijalsdfjijl234123i ...”]。 因?yàn)閳D像導(dǎo)出過(guò)濾器取決于（有點(diǎn)薄片）的瀏覽器支持并且拾取不必要的數(shù)據(jù)，建議僅將其用于演示和開(kāi)發(fā)。

選擇導(dǎo)出/存儲(chǔ)格式

我知道你是想從jSignature想要“圖像”，但是，請(qǐng)控制自己，并遠(yuǎn)離。 相反，考慮在后期制作服務(wù)器端捕獲“base30”或“svg”數(shù)據(jù)并增強(qiáng)+渲染。

如果您導(dǎo)出“位圖”，圖像將保留實(shí)際的繪圖顏色，大小，缺陷，并且最重要的是可能無(wú)法在所有瀏覽器上運(yùn)行。

• 裝飾（簽名線）將在圖像上。 如果jSignature被設(shè)計(jì)為深色背景+光筆顏色，那么您將在圖像上獲得什么 - 深色背景，覆蓋灰色簽名線的輕圖紙。 這張圖片在打印時(shí)幾乎沒(méi)有用。 如果您的背景與筆的強(qiáng)度相同（例如，藍(lán)色為紅色），則這種情況會(huì)更糟，在這種情況下，當(dāng)黑白打印時(shí)，圖像只是一個(gè)深灰色的矩形。 如果您更改頁(yè)面顏色，捕獲的圖像現(xiàn)在開(kāi)始穿上這些顏色。

• Android 1.6 -2.2（2.3？）不支持canvas.toDataURL方法 - 位圖導(dǎo)出功能。

• 小屏幕（手機(jī)）產(chǎn)生微小的丑陋的位圖。

• 畫(huà)布導(dǎo)出的位圖與向量相比尺寸為GARGANTUAN，因?yàn)樗Ａ袅怂兄虚g陰影和背景像素。

如果你想強(qiáng)制自己只能使用白色簽名捕獲網(wǎng)頁(yè)風(fēng)格之上的黑色，請(qǐng)使用位圖導(dǎo)出。 如果你想讓你的數(shù)據(jù)庫(kù)管理員尖叫，因?yàn)樗形粓D數(shù)據(jù)的數(shù)據(jù)庫(kù)的備份需要一天以上，請(qǐng)使用位圖導(dǎo)出。 如果您希望您的銷(xiāo)售/業(yè)務(wù)部門(mén)尖叫您，因?yàn)槟暮灻东@格式無(wú)法輕松集成到新的精心設(shè)計(jì)的wizbang產(chǎn)品/服務(wù)中，請(qǐng)使用位圖導(dǎo)出。 如果您想解釋為什么選擇的siganture格式導(dǎo)出不適用于所有目標(biāo)平臺(tái)，請(qǐng)使用位圖導(dǎo)出。 如果你想現(xiàn)在采取簡(jiǎn)單的路線，并使IT人員在您被解雇之后進(jìn)入，將ImageMagic智能卡應(yīng)用于您決定收集的彩色像素混亂上的困難任務(wù)，請(qǐng)使用位圖導(dǎo)出格式。

如果使用捕獲的簽名與“業(yè)務(wù)”或“打印”或“多個(gè)演示場(chǎng)所”有任何關(guān)系，則使用“base30”或“svg”數(shù)據(jù)等矢量格式，并在后期制作中增強(qiáng)+渲染。 “extras”文件夾中可以找到解壓縮和樣本，基本的渲染代碼（.Net，截至2012年2月的PHP）。 您將使用這些為核心，為您自己的渲染邏輯提供可循環(huán)的坐標(biāo)數(shù)據(jù)數(shù)組。

Events（事件）

jSignature初始化的dom元素在筆畫(huà)完成后立即發(fā)出“change”事件，并將其添加到存儲(chǔ)器中。 （換句話說(shuō)，當(dāng)用戶(hù)完成繪制每個(gè)筆畫(huà)時(shí)，如果用戶(hù)繪制3筆畫(huà)，則每次筆畫(huà)完成后，此事件將發(fā)出3次）。

以下是您如何綁定到該事件：

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

事件通過(guò)“線程”（setTimeout（...，3））異步發(fā)出，因此您不需要將事件處理程序包裝到任何類(lèi)型的“線程”中，因?yàn)閖Signature小部件將繼續(xù)執(zhí)行，并且不會(huì)等待 你要完成你的自定義事件處理程序邏輯。

個(gè)人經(jīng)驗(yàn)和一個(gè)完整的php版本demo

html部分

//jquery.moblie會(huì)和jsignature有沖突，不知道是版本問(wèn)題，還是代碼代碼沖突
<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,//去除默認(rèn)畫(huà)布上那條橫線
            lineWidth: '5'
        };
        $("#signature").jSignature(arguments);

        $('#clear').click(function () {
            $("#signature").jSignature("reset");
        });
        $('#save').click(function () {
            //標(biāo)準(zhǔn)格式但是base64會(huì)被tp框架過(guò)濾，所不校驗(yàn)，但是jSignature默認(rèn)是使用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);

            //詢(xún)問(wèn)框
            layer.confirm("如果確認(rèn)無(wú)誤，請(qǐng)確認(rèn)<br><img src=" + i.src + " height='100px' width='100px' />", {
                btn: ['確認(rèn)', '取消'] //按鈕
            }, 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長(zhǎng)度過(guò)大，json傳輸
                    type: "post",
                    cache: false,
                    success: function (msg) {
                        if (msg.code === 1) {
                            layer.msg('上傳成功');
                        } else {
                            layer.msg('上傳失敗,請(qǐng)?jiān)俅魏灻?#39;);
                        }
                    }
                });
            }, 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中文開(kāi)發(fā)的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！