javascript - JSignature 从数据库重新创建签名

Question

我设法将 JSignature 数据保存到数据库中。字符串看起来像这样。

image/jsignature;base30,4P2cl1H1J1T1U1P1K1yiZ2X54000000337ehq1v1u1z1Atke8200Y47dkqsmda76422232368dj1C1z1D1D1xrea310Z79caa763000Y32568adgol_4DZ335dcfifega3Y79bbcdecab864320Z4caec866767753200Y34667776766472200Z89f975551Y1668aba885330000Z3576

现在我需要在下一页再次显示签名。

我试着做

$("#getSignatureBack").jSignature("importData", data );

data上面的字符串在哪里，是我要显示签名getSignatureBack的 ID 。div我该怎么做？

谢谢

Answer 1

首先导入所有 JSignature 库，然后，

要创建签名框：

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

<script>
$('#signature').jSignature();
</script>

<button id="button">Submit</button>

现在将其保存在数据库中：

 <script>
 $('#button').click(function(){
     var dataToBeSaved =  $("#signature").jSignature("getData","svgbase64");       
    // save this string to the database. 
  })
 </script>

要从数据库中取回它：

   <div id="displaySignature">
   </div>
   <script>
         $(document).ready(function(data){
           var i = new Image()
           var signature = signatureDataFromDataBase;
    //Here signatureDataFromDataBase is the string that you saved earlier
            i.src = 'data:' + signature;
            $(i).appendTo('#displaySignature')
           })
   </script>

Answer 2

获取签名方法

var dataString = $("id or classname").jSignature("getData");

打印签名数据

$('id or classname').append("<img class='imported' src='" + dataString + "'></img>");

j签名方法

如果您需要特定的格式获取签名，则在第二个参数中获取 jSignature 是可选的，然后使用第二个parameters like (base30 , base64)

     Name             Usage                               Description
---------------------------------------------------------------------------
     clear          .jSignature("clear")          Empties and resets the canvas.

    getData      .jSignature("getData", "base30")   Converts the canvas into a 
                                                    base64 encoded data string which 
                                                    can be saved as a string in any 
                                                    database during a form post or 
                                                    submit.
    importData   .jSignature("importData",dataurl)  Updates an existing jSignature 
                                                    canvas with the dataurl 
                                                    extracted from the above getData 
                                                    method.

示例：Base30 示例

下面的示例 或此处的现场演示

$(document).ready(function() {
var dataString;
  $("#SignatureController").jSignature({
    'decor-color': 'transparent',
    'lineWidth': 1,
  });
	$('#Getsign').click(function () {
				dataString = $("#SignatureController").jSignature("getData");
				alert(dataString);				
			});
			$('#Printsign').click(function () {
				var dataString = $("#SignatureController").jSignature("getData");
				alert(dataString);
				$('#PrintSignatureController').append("<img class='imported' src='" + dataString + "'></img>");
			});
});

#SignatureController
{
	width: 500px;
  height: 150px;
  border: 1px solid black;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.rawgit.com/brinley/jSignature/master/libs/jSignature.min.js"></script>
<h2>Signature Test</h2>
<div id="SignatureController">
    
</div>

<br>
<h2>Print Test</h2>
<div id="PrintSignatureController">
    
</div>
<button id="Getsign">Get Singture </button>
<button id="Printsign">Print Singture </button>