JSignature recreate signature from db

Question

I have managed to save JSignature data to the database. The string looks like this.

image/jsignature;base30,4P2cl1H1J1T1U1P1K1yiZ2X54000000337ehq1v1u1z1Atke8200Y47dkqsmda76422232368dj1C1z1D1D1xrea310Z79caa763000Y32568adgol_4DZ335dcfifega3Y79bbcdecab864320Z4caec866767753200Y34667776766472200Z89f975551Y1668aba885330000Z3576

Now i need to display the signature again in the next page.

I tried doing

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

where data is the above string and getSignatureBack is the ID of the div that i want to display the signature. How do i do it?

Thanks

Answer 1

Get the signature Method

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

Print Signature Data

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

jSignature Method

Get jSignature inside the second parameter is optional if you required specific formate get signature then use second 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.

Example : Base30 Example

Example below or Live Demo Here

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

Answer 2

First Import all the JSignature libraries then,

To create a signature box :

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

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

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

Now to Save it in the database :

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

To get it back from the database :

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