All geek questions in one place

Signature and dompdf

I use the Thomas J Bradley plugin to draw two signatures at the bottom of the html form, which is then converted to pdf using dompdf and sent via email as an attachment using sendmail.

Everything works well, except for the fact that I cannot redraw the signatures in a PDF file without saving them to disk, which I would like to avoid.

Mr. Bradley provided several methods for regenerating the signature , but I need some tips on how to transfer the signature data along with the form values ​​to a PDF converter, preferably on the fly (without saving the data to disk or database).

I would appreciate any response. If you need any sample code, please let me know.

Thank you in advance!

+4
source share
2 answers

Brian, you rock! I had to do the following to make it work, as we checked that this line included data:image/png;base64,

But with your help and some digging, I got a pdf file with a signature on it :) This is the code, if someone needs it in the future.

html side - client:

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="jquery.signaturepad.css" media="screen"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.signaturepad.min.js"></script> </head> <body> <form method="post" action="pdf.php" class="sigPad"> <label for="name">Print your name</label> <input type="text" name="name" id="name" class="name"> <p class="drawItDesc">Draw your signature</p> <ul class="sigNav"> <li class="drawIt"><a href="#draw-it">Draw It</a></li> <li class="clearButton"><a href="#clear">Clear</a></li> </ul> <div class="sig sigWrapper"> <canvas class="pad" width="198" height="55"></canvas> <input type="hidden" name="imgOutput" class="imgOutput"> </div> <button type="submit">I accept the terms of this agreement.</button> </form> <script> var sig; $(document).ready(function() { /*sig = $('.sigPad').signaturePad();*/ sig = $('.sigPad').signaturePad({drawOnly:true}); }); $('.sigPad').submit(function(evt) { $('.imgOutput').val( sig.getSignatureImage() ); }); </script> </body> </html>

and awesomeness (pdf.php) - server side:

 <?php if(isset($_POST['imgOutput'])){$img_output = $_POST['imgOutput'];} $bse = preg_replace('#^data:image/[^;]+;base64,#', '', $img_output ); if ( base64_encode( base64_decode($bse) ) === $bse ) { require_once 'dompdf/dompdf_config.inc.php'; $html = '<!DOCTYPE html><html><head></head><body><p>Your signature:</p> <br /> <img src="'. $img_output .'"></body></html>'; $dompdf = new DOMPDF; $dompdf->load_html($html); $dompdf->render(); $dompdf->stream("test.pdf"); } else { echo ("ERROR !"); } ?>

Many thanks to @Thomas J Bradley, the dompdf team and @BrianS , who saved this day.

PS: @BrianS I cannot answer your answer since I am still a beginner and do not have a 15 minimum reputation to do this.

+2
source

Instead of regenerating the signature, you should capture the signature image. Signature Pad can return the signature as an image encoded as a data URI . dompdf understands data URIs, so you can use this to create your own PDF file. If you target a platform that does not support this method, the author has many options for converting the signature server side .

The process in a nutshell is to capture the output of the image when you submit the form, submit it to the server and dynamically fill out your HTML signature to generate the PDF. No need to save image.

I did not use the Signature Pad, so I use the author's HTML template as the basis for the sample code.

Client side

 <form method="post" action="" class="sigPad"> <label for="name">Print your name</label> <input type="text" name="name" id="name" class="name"> <p class="typeItDesc">Review your signature</p> <p class="drawItDesc">Draw your signature</p> <ul class="sigNav"> <li class="typeIt"><a href="#type-it" class="current">Type It</a></li> <li class="drawIt"><a href="#draw-it">Draw It</a></li> <li class="clearButton"><a href="#clear">Clear</a></li> </ul> <div class="sig sigWrapper"> <div class="typed"></div> <canvas class="pad" width="198" height="55"></canvas> <input type="hidden" name="output" class="output"> <input type="hidden" name="imgOutput" class="imgOutput"> </div> <button type="submit">I accept the terms of this agreement.</button> </form> <script> var sig; $( document ).ready( function ( ) { sig = $('.sigPad').signaturePad(); } ); $( '.sigPad' ).submit( function ( evt ) { $( '.imgOutput' ).val( sig.getSignatureImage( ) ); } ); </script>

Server side

 <?php $img_output = $_POST['imgOutput']; if ( base64_encode( base64_decode( $img_output ) ) === $img_output ) { require_oncde 'dompdf_config.inc.php'; $html = '<p>Your Signature:</p><p><img src="' . $img_output . '"></p>'; $dompdf = new DOMPDF; $dompdf->load_html( $html ); $dompdf->render( ); $dompdf->stream( ); } else { // exception logic ... "your signature was not valid" } ?>

Simple verification on signature image as valid base64 from How to check if base64 string is correct

+6
source

Source: https://habr.com/ru/post/1489088/

More articles:


All Articles