brinley / jSignature

jQuery plugin for adding web signature functionality
http://www.unbolt.net/jSignature
691 stars 529 forks source link

Display signature again #101

Open DazornSama opened 8 years ago

DazornSama commented 8 years ago

Hi all, i have a c# asp net mvc application, that let users sign their documents. When i have to save the string, it works fine with hidden input and jquery code (i save the string in db):

var sig_data = $("#signature").jSignature("getData", "image"); var img = sig_data[1]; $("#firma-hidden").val(img);

But, i need to import the signature when the user want to modify his document. Actually i used this inline code:

<script src="~/Scripts/jSignature.js"></script> <script src="~/Scripts/crea-funzioni.js"></script> <script> $(document).ready(function () { $("#signature").jSignature("setData", 'data:image/jsignature;base64,@Model.FIRMA'); }); </script>

How can i get this work?? Here is an example of the string i got and i put in the db:

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

brinley commented 8 years ago

It looks like you got your formats mixed up.

Try saving your data as $("#signature").jSignature("getData", "base30");

And reimporting as $("#signature").jSignature("setData", 'data:image/jsignature;base30,@Model.FIRMA');

DazornSama commented 8 years ago

Thanks @brinley !

DazornSama commented 8 years ago

I have another issue. Now i need to render the saved string to an image. How can i do this?? I use c# asp.net mvc

brinley commented 8 years ago

Try looking at the https://github.com/brinley/jSignature/tree/master/extras/SignatureDataConversion_dotNet

DazornSama commented 8 years ago

Yeah, i used them. I have this code: jSignature.Tools.Base30Converter Base30 = new jSignature.Tools.Base30Converter(); int[][][] arrBase30 = Base30.Base30ToNative(Rapportino.FIRMA); string strSVG = jSignature.Tools.SVGConverter.ToSVG(arrBase30); var byteArray = Encoding.ASCII.GetBytes(strSVG); using (MemoryStream stream = new MemoryStream(byteArray)) { var mySVG = SvgDocument.Open(stream.ToString()); var bitMap = mySVG.Draw(); bitMap.Save(HttpContext.Current.Server.MapPath("~/Pdf/Firme/" + IdTesta + ".png"), ImageFormat.Png); }

But the execution return this error: The specified document cannot be found. on: var mySVG = SvgDocument.Open(stream.ToString());

Where am i wrong?