importData / setData Base30

[BuildingBinary]

I am using jSignature to allow my clients to sign documents. I pass the signature using base30 to a MySQL database by saving the base30 value to a hidden input. From here, I needed to render the signature so it can be reviewed or edited.

What I don't understand is how to render the signature again using setData. I was thinking it would take the data from a javascript variable for the 2nd argument, but I keep getting an error that says unable import plugin "undefined". In addition, everything I have found documentation wise has not been clear how to take the base30 url formatted data and reimport it back into the canvas...

I was reading earlier, and found a lot about importData, which based on what I have read is depreciated? Not sure... Still couldn't get it to work either way.

I directly copy and paste the examples from the documentation and try to getting it working... and then I get an error saying can't call method join of undefined...

All I want to do is just import back my base30 php variable back into the canvas. How do I do this the proper way? If I can help at all by trying to get a more noob friendly tutorial or documentation written, I would love too.

I don't want anyone to hold my hand through this, but I really don't know what I am doing with my import. Thanks for the help.

[brinley]

It sounds like you did not include the base30 plugin in addition to the jSignature plugin.

[BuildingBinary]

I did, it's at the end of my entire document program, but it's above any of my jSignature functions.

This is what gives me that error... ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// var $sigdiv = $("#sige2a6{$i}") datapair = $sigdiv.jSignature("getData","image/jsignature;base30,1PZ1043Y19fmid51220Z61wrrcY3cmsj8_2DZ8flbY64Z14651Y51A2G2H1vZa1B1Do4Y2ad61_4Fahmg8Z2bgjf80Ycm1x1E1Bj4Zej_4K12Z277992Y2age961Z1375b3_7VdlkdZ69a0Y578689c_4I5cdbZ8jmd81Y35432_cAZcjh5Y2ciia2Z3Y17a981Z2a_3Q38a630Z5984Y49972Z148c_bE37cike9213_1R4bntlb4Z37b_ixZ8r1C1Bj3Yd1x1K1Fl3Zf1I1Jt6Y51w1Q1V1FhZ33Y2_4vZ23Y27b86Z18ecdfma4Y17koh91Z2Y55") $sigdiv.jSignature("setData", "data:" + datapair.join(",")) //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Using this gives me a different error.... ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// var $sigdiv = $("#sige2a6{$i}") datapair = $sigdiv.jSignature("getData","base30") $sigdiv.jSignature("setData", "data:" + datapair.join(",")) ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Here is that error in Chrome Console: ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Uncaught TypeError: Cannot call method 'split' of undefined jSignature.CompressorBase30.js:98 uncompressstrokeleg jSignature.CompressorBase30.js:98 uncompressstrokes jSignature.CompressorBase30.js:165 pluginDecompressor jSignature.CompressorBase30.js:179 _setDrawingData jSignature.js:1308 $.fn.(anonymous function) jSignature.js:1413 (anonymous function) index.php:884 f jquery.min.js:1 p.fireWith jquery.min.js:1 st.extend.ready jquery.min.js:1 xt //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

I have the plugin included like so above the code i posted above: script src="/smarty/templates/js/jSignature/plugins/jSignature.CompressorBase30.js"

Still nothing....

[brinley]

jSignature.CompressorBase30.js needs to be added before jQuery and jSignature library

$sigdiv.jSignature("setData", "data:" + datapair.join(",")) should have worked.

Can you compare what you get back from your backend to make sure it matches $sigdiv.jSignature("getData","base30");

[BuildingBinary]

Okay, I added the file before jQuery, and I get an error saying I need jQuery first. The getData doesn't even work now that I imported the compressor. It used to give me a url, and now it doesn't even do that. Now if I try to make a console log of the value of the signature I get undefined...

I did compare it, and it matches perfectly as far as my targeted div.

Should I just avoid using base30 and just skip to base64 and use that instead? Once I capture the singature once, I can just render it as an image using the url stored in my database. I just can't save graphics on the server. It all needs to be database driven. The users of this program I am building will not need cross browser anything. It just needs to work in Chrome.

[brinley]

You include jQuery first, followed by jSignature, then the plugins in this specific order and you run any code after this unless you wrap the code to initialise jSignature in an on ready or load.

If you just want to support chrome, then the native base64 should work and you can save that base64 string in the database. When you need to display it, simply output the base64 string from the database into an tag's src attribute.

On Mon, Aug 5, 2013 at 3:54 PM, jghuff3 notifications@github.com wrote:

Okay, I added the file before jQuery, and I get an error saying I need jQuery first. The getData doesn't even work now that I imported the compressor. It used to give me a url, and now it doesn't even do that. Now if I try to make a console log of the value of the signature I get undefined...

I did compare it, and it matches perfectly as far as my targeted div.

Should I just avoid using base30 and just skip to base64 and use that instead? Once I capture the singature once, I can just render it as an image using the url stored in my database. I just can't save graphics on the server. It all needs to be database driven. The users of this program I am building will not need cross browser anything. It just needs to work in Chrome.

— Reply to this email directly or view it on GitHubhttps://github.com/brinley/jSignature/issues/35#issuecomment-22146975 .

[BuildingBinary]

Okay, thats a better direction to go then, and yeah, I was using onLoad how I had it before.

So I'll use Base64 then. Thank-you :smile: . When I had base30 working, the only way I knew how to get the value to the database for the application was by making a confirm button that passed the signature to a hidden input field. Is there a better way of getting the jsignature value of a field with PHP? I tried reading the documentation and I got a little confused. Whats the best way to do this?

[brinley]

There are 2 ways to pass it to the signature

• via hidden input field as you have done
• via $.post call to submit the form

On Tue, Aug 6, 2013 at 9:46 AM, jghuff3 notifications@github.com wrote:

Okay, thats a better direction to go then, and yeah, I was using onLoad how I had it before.

So I'll use Base64 then. Thank-you [image: :smile:] . When I had base30 working, the only way I knew how to get the value to the database for the application was by making a confirm button that passed the signature to a hidden input field. Is there a better way of getting the jsignature value of a field with PHP? I tried reading the documentation and I got a little confused. Whats the best way to do this?

— Reply to this email directly or view it on GitHubhttps://github.com/brinley/jSignature/issues/35#issuecomment-22193239 .

Brinley Ang Software Developer & Consultant http://www.unbolt.net

[BuildingBinary]

If I do it the 2nd way, what field am I looking to grab the post data from? I know that the hidden method can only pass certain size values. It is possible to make a signature that is bigger then the hidden input can store right? And this could cause messed up signatures right?

[brinley]

You can do something like the following, $.post("formsubmit.php", { "sig": $("#signature").getData() });

On Wed, Aug 7, 2013 at 8:56 AM, jghuff3 notifications@github.com wrote:

If I do it the 2nd way, what field am I looking to grab the post data from? I know that the hidden method can only pass certain size values. It is possible to make a signature that is bigger then the hidden input can store right? And this could cause messed up signatures right?

— Reply to this email directly or view it on GitHubhttps://github.com/brinley/jSignature/issues/35#issuecomment-22261678 .

Brinley Ang Software Developer & Consultant http://www.unbolt.net

[erwinvanbrink]

Hi jghuff3

I'm also having problems with rendering the signature from the Base30 code out of my database. I've managed to get this Base30 code and store it in my database, but I can't render it back into my web page. Did you find a working solution for the Base30 code ? Of did you switch to the Base64 code ?

Would you please be so kind to share this solution with me ? Thanks a lot in advance !

[onexdata]

I ran into this problem myself and it was driving me crazy... a little difficult to get to work, but wow what a powerful library! :)

You have to prepend "data:" to the start of your base30 object like this:

 $sig.jSignature("importData", 'data:'+signatureDataBase30);

...and presto! Calling SetData with your base30 string now works! :)

Note: Having trouble loading the base30 string in the first place? You need to download the jSignature source and include jSignature.CompressorBase30.js after including jSignature.js, and you'll be able to use base30 as a getData format,

[javedofhumber]

does any 1 know how to do the same thing in .Net..?

[brinley]

Sounds like you want to do conversion in .Net? See https://github.com/brinley/jSignature/blob/master/extras/SignatureDataConversion_dotNet/core/converter_alphanum_base30.cs