1

I'm using jSignature to allow signatures in an html form (jQuery Mobile to be exact). I'd like to be able to submit an image of the signature with the form.

With the code below I've gotten through the first few steps - which were hard enough for me. It successfully creates the DataURI (data:image/png;base64,iVBOR...) and adds it to the value of hidden field _fid_86 when the placesig function is called.

What I need help with: 1) How do I convert the DataURI to an image that can be included in the form data when it is submitted? 2) How can I connect that image to the hidden input? Will the same method work, or does it need to be a file input.

I'm posting this form to QuickBase from a webapp. Ideally, I'd like to be able to accomplish this without any server-side involvement, so that the app will be self-sufficient and not rely on php or other hosted scripts.

If that's not possible, I could do it with php, but still do not know how to make that happen.

I've spent days on this. And I know my lack of programming knowledge is to blame. A solution to this would be HUGE for me.

Thanks!!

<body>
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<script src="jSignature.js"></script>
</head>
<body>

<form name=qdbform method=POST onsubmit='return validateForm(this)' encoding='multipart/form-data' 

encType='multipart/form-data' action=https://www.quickbase.com/db/...?act=API_AddRecord>

<script type="text/javascript">
var $sigDiv = null;

$(document).ready(
    function() 
    {
        $sigDiv = $("#signature1").jSignature({'UndoButton':false,color:"#000000",lineWidth:2});
    }
);

function placesig() 
{
    var datapair = $sigDiv.jSignature("getData", "image");
    var i = new Image();
    i.src = "data:" + datapair[0] + "," + datapair[1];
    var src = $(i).attr('src');
    $("#_fid_86").val(src);

};
</script>

<div id="signature1"></div>

<input data-theme="a" type="button" value="Place Image" onclick="placesig();"/>

<input type="hidden" id="_fid_86" name="_fid_86" />

<input type="submit" value="Save">

</form>
user1911141
  • 137
  • 1
  • 4
  • 14
  • "How do I convert the DataURI to an image" - as far as I know that's impossible. Once you got the DataURI, you use it as an image this way: [img src='TheDataURI' /]. "How can I connect that image to the hidden input? Will the same method work, or does it need to be a file input." - uh, no. I think you are passing the signature value just fine, as a hidden variable. – hyankov Dec 17 '12 at 21:32
  • Ok, so if I use how would I send that as a hidden part of my form and have it arrive as a file? Thanks for your response! – user1911141 Dec 17 '12 at 21:49
  • I don't get the question. In your sample code above you are already doing it - you pass the signature as a hidden field. – hyankov Dec 17 '12 at 21:54
  • Right. But that was just a test to a textfield in Quickbase. I need to have the actual image show up as a file attachment in quickbase, not a string. – user1911141 Dec 17 '12 at 22:01
  • Now I understand. I think there might be a way to do this with FormData. Like this here: http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata – hyankov Dec 17 '12 at 22:11
  • Thanks Hristo. Yeah that's the same thread I mentioned in my response to the answer below. Its a bit beyond me, but I guess I'll keep staring at it, hoping... – user1911141 Dec 17 '12 at 22:34

1 Answers1

0

It's not possible to do this without server side code. jSignature will generate a Data URL but this cannot be passed as part of a multipart form the way file uploads are handled. Instead jSignature will set a textbox with the dataURL and on the server you can read this and produce a file. This is actually covered in one of the examples (in PHP even) called jSignature_Tools_Base30.php. Personally I would go with the SVN example (less data across the wire and more flexibility for scaling.

Jason Sperske
  • 29,816
  • 8
  • 73
  • 124
  • Just found this thread: http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata Its a bit beyond me, but seems to indicate the possibility with javascript. I did explore the included jSignature examples, but sadly, couldn't figure out how to put the image back into the form - since wasn't really processing the form data with php in the first place, and am useless at that as well... – user1911141 Dec 17 '12 at 21:43
  • That linked answer is an interesting approach. It relies on [BlobeBuilder](https://developer.mozilla.org/en-US/docs/DOM/BlobBuilder) which may not enjoy the wide support of browsers that you need (depends on your application). – Jason Sperske Dec 17 '12 at 22:34