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

I found the solution for this problem. I was doing it wrong while saving it. Save it as a svg rather than base30. — MSH, Jun 10 '16 at 18:30
Can you please make a full answer to this question....how to save the signature and then how to recreate it from DB? — lewis4u, Dec 13 '16 at 15:44
Yes sure i can do that. I will post it as an answer to this post. — MSH, Dec 13 '16 at 17:27

score 1 · Answer 1 · answered Dec 13 '16 at 17:48

1

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>

answered Dec 13 '16 at 17:48

MSH

297
1
3
12

cool...and do you know how to display this as an image, just to be seen not for edit? – lewis4u Jan 05 '17 at 12:57
The very last piece of code above is exactly what you want. It will be displayed as an image and cant be edited. – MSH Jan 05 '17 at 14:22
I want to make this to work with base30 because it's much smaller....at the moment it works with my workaround but I'm not satisfied. take a look at my question: http://stackoverflow.com/questions/41486345/jsignature-jquery-plugin-make-an-image-from-signature-stored-in-db-base30 maybe you could help? – lewis4u Jan 05 '17 at 14:25

Sumit patel · Answer 2 · 2017-11-24T07:13:54.127

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>

JSignature recreate signature from db

2 Answers2

Linked