Signature-Pad DomPDF and Multiple Signatures

StackOverflow https://stackoverflow.com/questions/23504294

문제

I am a newbie so please excuse me if my question is stupid. My problem is when I try to do multiple signatures using the instructions here: https://github.com/thomasjbradley/signature-pad/blob/master/examples/accept-multiple-signatures.html

When I move the class "sigPad" from the Form tag into the Div tag (like in the example in the link), then the domPDF creation doesn't work. "Image not found".

So to boil down my problem into its essence, I have narrowed it down to this issue. Why does the form not work with my domPDF script if I move the class "sigPad" to the div.

Also, do I have any options to fix this? I have a large form that works now with dompdf and I would like to add several signatures to it. I would prefer to not have the class in the form tag.

Here is an example without multiple signatures, just trying to move the sigPad class to the div rather than in the form. If it is in the Form tag it works, if it is in the div tag like this it does not:

Signature.PHP

<form method="post" action="pdf.php">
<div class="sigPad">
<canvas class="pad" width="198" height="55"></canvas>
<input type="hidden" name="output" class="output" />
</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 ) {
$( '.output' ).val( sig.getSignatureImage( ) );
} );  
</script>

PDF.PHP

<?php
if(isset($_POST['output'])){$output = $_POST['output'];}
require_once '/dompdf/dompdf_config.inc.php';
$html = '<!DOCTYPE html><html><head></head><body><p>Your signature:</p><br /><img src="'. $output .'"></body></html>';
$dompdf = new DOMPDF;
$dompdf->load_html( $html );
$dompdf->render( );
$dompdf->stream("test.pdf");
?>

Any help would be greatly appreciated. Thank You!

도움이 되었습니까?

해결책

When you move the .sigPad class from the FORM element to the DIV element you no longer have a submit() event that you can trigger. This event is only available for the FORM element. Because this event is not triggered, the signature image data is not copied into your INPUT element.

Try something like the follow update to your sample:

HTML

<form method="post" action="pdf.php">
  <div class="sigPad">
    <canvas class="pad" width="198" height="55"></canvas>
    <input type="hidden" name="output1" class="output" />
  </div>
  <div class="sigPad">
    <canvas class="pad" width="198" height="55"></canvas>
    <input type="hidden" name="output2" class="output" />
  </div>
  <button type="submit">I accept the terms of this agreement.</button>
</form>

JavaScript

<script>
  $( document ).ready( function ( ) {
    $('.sigPad').signaturePad( );
  } );
  $( 'form' ).submit( function ( evt ) {
    $( '.sigPad' ).each( function ( idx , el ) {
      $( this ).find( '.output' ).val( $( this ).signaturePad( ).getSignatureImage( ) );
    } );
  } );  
</script>

The updated JavaScript is not perfect, and maybe a bit confusing for you, but it's flexible enough to handle any number of signature fields. What's happening is that when the form submits the document is parsed for the signature pad containers. Then the each() construct is used to set the value of the input.output element to the value of the signature pad.

PHP

<?php
require_once '/dompdf/dompdf_config.inc.php';
$output1 = ( !empty( $_POST['output1'] ) ? $_POST['output1'] : 'http://placekitten.com/300/100' );
$output2 = ( !empty( $_POST['output2'] ) ? $_POST['output2'] : 'http://placekitten.com/300/100' );
$html = '
  <!DOCTYPE html>
  <html>
  <head></head>
  <body>
    <p>Signature 1:</p><br /><img src="'. $output1 .'">
    <p>Signature 2:</p><br /><img src="'. $output2 .'">
  </body>
  </html>
';
$dompdf = new DOMPDF;
$dompdf->load_html( $html );
$dompdf->render( );
$dompdf->stream("test.pdf");
?>

I like ternary operators for initializing variables, but I'm evil. Also, we should always be mindful to perform extra validation of data from the client. So I might enhance the PHP to at least see if the base64 data is, in fact, base64 (and not, say, an HTML fragment).

$output1 = (!empty( $_POST['output1'] ) && base64_encode( base64_decode( $_POST['output1'] ) ) === $_POST['output1']) ? $_POST['output1'] : 'http://placekitten.com/300/100';

You could even go one step further and check to see if it's actually an image. But I'll leave that as an exercise for you.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top