Muiter Posted October 6, 2018 Share Posted October 6, 2018 I have this script running, the user can place it's signature: https://willowsystems.github.io/jSignature/#/about But I am not succeeding in getting the`svg` information that was generated copied to an text field so I can send it with this html form to my database. <div id="signature"></div> <textarea id="signature_svg" rows="5" cols="50"></textarea> . <script src="vendor/jsignature/jSignature.min.js"></script> <script> $(document).ready(function() { var $sigdiv = $("#signature") $sigdiv.jSignature() // inits the jSignature widget. // after some doodling... $sigdiv.jSignature("reset") // clears the canvas and rerenders the decor on it. // Getting signature as SVG and rendering the SVG within the browser. // (!!! inline SVG rendering from IMG element does not work in all browsers !!!) // this export plugin returns an array of [mimetype, base64-encoded string of SVG of the signature strokes] var datapair = $sigdiv.jSignature("getData", "svgbase64") var i = new Image() i.src = "data:" + datapair[0] + "," + datapair[1] $(i).appendTo($("#signature_svg")) // append the image (SVG) to DOM. $("#signature").bind('change', function(e){ document.getElementById('signature_svg').value; }) }) </script> I am not detecting any errors in my *console*. Any suggestions how to get the information of signature into signature_svg so I can send the form with this information? Link to comment Share on other sites More sharing options...
requinix Posted October 6, 2018 Share Posted October 6, 2018 You can't just copy and paste code from the docs and expect it to do what you want. Do you know what that business with datapair does? Why and how to use the change event on #signature? Link to comment Share on other sites More sharing options...
Muiter Posted October 7, 2018 Author Share Posted October 7, 2018 12 hours ago, requinix said: You can't just copy and paste code from the docs and expect it to do what you want. Do you know what that business with datapair does? Why and how to use the change event on #signature? You are correct, thank your for this tip. This did do the trick for me. <script> $(document).ready(function() { var $sigdiv = $("#signature") $sigdiv.jSignature() // inits the jSignature widget. // after some doodling... $sigdiv.jSignature("reset") // clears the canvas and rerenders the decor on it. }) </script> <script> function copy() { // signature var $sigdiv = $("#signature") var datapair = $sigdiv.jSignature("getData", "svgbase64") document.getElementById("signature_svg").value = datapair[1]; } Link to comment Share on other sites More sharing options...
requinix Posted October 7, 2018 Share Posted October 7, 2018 That looks much better, good job. Only part missing there is how you're calling copy but I assume you're doing it from #signature's onchange (which is where it should be). Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.