After we save the image with this command
$("#canvas").jSignature("getData", "base30");
we can store that data to DB and it is a simple string:
data:image/jsignature;base30,9MZ4555665655465644644645433232100Y2333465656786456646464443Z54334433222Y13344544486666667775353646443_2xZ110000000Y1111111222223222344555332220100000Z11111121212130Y122222333343222111100000Z1111212222122212
And now how to make an image from "base30" signature? Can we convert this to anything so it can be displayed on the website?
Or maybe there is a way to disable editing the canvas. To prevent changing the signature?
I have made a little workaround and it works.
I have created an invisible div where i load the jSignature from DB and made it invisible, then i get the svg out of it and display that svg in the page
<div id="oldSignature" style="display: none"></div>
<object id="img" type="image/svg+xml" data="">
Your browser doesn't support SVG!
</object>
@if (isset($offer->signature))
var sigCanvas = $("#oldSignature").jSignature({width: 700, height: 180, "background-color":"#ddd"});
$("#oldSignature").jSignature("importData", "{{$offer->signature}}");
var svg = $("#oldSignature").jSignature("getData", "svg");
$("#img").attr("data", 'data:' + svg);
@endif
Look in the extras folder on Github. There are php and DotNet examples.
Regarding the Base30 format, the docs for jSignature say
base30 (alias image/jSignature;base30) (EXPORT AND IMPORT) (VECTOR) data format is a Base64-spirited compression format tuned for absurd compactness and native url-compatibility. It is "native" data structure compressed into a compact string representation of all vectors. Code examples (.Net, Python) detailing decompression of this format into render-able form (SVG, language-native coordinate arrays) are provided in the extras folder. One of possible ways of communicating the data to the server is JSONP, which has a practical URL length limit (imposed by IE, of course) of no more than 2000+ characters. This compression format is natively URL-compatible without a need for re-encoding, yet will fit into 2000 characters for most non-complex signatures.
Edit - for those not having success with the /extras example, there may be some useful help / sample code here in this case at Github related to Convert Base30 to PNG using PhP . Too much detail there to include here.