Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Instead of regenerating the signature you should capture the signature image. Signature Pad can <a href="http://thomasjbradley.ca/lab/signature-pad/#images" rel="nofollow noreferrer">return the signature as an image</a> encoded as a <a href="https://en.wikipedia.org/wiki/Data_URI_scheme" rel="nofollow noreferrer">data URI</a>. dompdf understands data URIs so you can use this to generate your PDF. If you're targeting a platform that doesn't support that method the author has plenty of options for <a href="http://thomasjbradley.ca/lab/signature-pad/#images-serverside" rel="nofollow noreferrer">converting the signature server side</a>.</p> <p>The process in a nutshell is to capture the image output on form submission, pass it to the server, and dynamically populate your HTML with the signature for PDF generation. No need to save the image.</p> <p>I've not used Signature Pad, so I'm using the author's <a href="http://thomasjbradley.ca/lab/signature-pad/#accept-html" rel="nofollow noreferrer">HTML template</a> as a base for the sample code.</p> <p><em>Client Side</em></p> <pre><code>&lt;form method="post" action="" class="sigPad"&gt; &lt;label for="name"&gt;Print your name&lt;/label&gt; &lt;input type="text" name="name" id="name" class="name"&gt; &lt;p class="typeItDesc"&gt;Review your signature&lt;/p&gt; &lt;p class="drawItDesc"&gt;Draw your signature&lt;/p&gt; &lt;ul class="sigNav"&gt; &lt;li class="typeIt"&gt;&lt;a href="#type-it" class="current"&gt;Type It&lt;/a&gt;&lt;/li&gt; &lt;li class="drawIt"&gt;&lt;a href="#draw-it"&gt;Draw It&lt;/a&gt;&lt;/li&gt; &lt;li class="clearButton"&gt;&lt;a href="#clear"&gt;Clear&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="sig sigWrapper"&gt; &lt;div class="typed"&gt;&lt;/div&gt; &lt;canvas class="pad" width="198" height="55"&gt;&lt;/canvas&gt; &lt;input type="hidden" name="output" class="output"&gt; &lt;input type="hidden" name="imgOutput" class="imgOutput"&gt; &lt;/div&gt; &lt;button type="submit"&gt;I accept the terms of this agreement.&lt;/button&gt; &lt;/form&gt; &lt;script&gt; var sig; $( document ).ready( function ( ) { sig = $('.sigPad').signaturePad(); } ); $( '.sigPad' ).submit( function ( evt ) { $( '.imgOutput' ).val( sig.getSignatureImage( ) ); } ); &lt;/script&gt; </code></pre> <p><em>Server Side</em></p> <pre><code>&lt;?php $img_output = $_POST['imgOutput']; if ( base64_encode( base64_decode( $img_output ) ) === $img_output ) { require_oncde 'dompdf_config.inc.php'; $html = '&lt;p&gt;Your Signature:&lt;/p&gt;&lt;p&gt;&lt;img src="' . $img_output . '"&gt;&lt;/p&gt;'; $dompdf = new DOMPDF; $dompdf-&gt;load_html( $html ); $dompdf-&gt;render( ); $dompdf-&gt;stream( ); } else { // exception logic ... "your signature was not valid" } ?&gt; </code></pre> <p>Simple validation on the signature image as valid base64 from <a href="https://stackoverflow.com/a/10797086/264628">How to check if a string is base64 valid</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload