title: Post DataURI as image file in html form
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>If that's not possible, I could do it with php, but still do not know how to make that happen.</p>
  
  <p>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.</p>
  
  <p>Thanks!!</p>
  
  <pre><code>&lt;body&gt;
  &lt;script src="jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="jSignature.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;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&gt;
  
  &lt;script type="text/javascript"&gt;
  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);
  
  };
  &lt;/script&gt;
  
  &lt;div id="signature1"&gt;&lt;/div&gt;
  
  &lt;input data-theme="a" type="button" value="Place Image" onclick="placesig();"/&gt;
  
  &lt;input type="hidden" id="_fid_86" name="_fid_86" /&gt;
  
  &lt;input type="submit" value="Save"&gt;
  
  &lt;/form&gt;
  </code></pre>