签名pad DomPDF和多重签名

Signature-Pad DomPDF and Multiple Signatures

本文关键字：pad DomPDF 签名      更新时间：2023-09-26

我是一个新手，所以如果我的问题很愚蠢，请原谅我。我的问题是，当我尝试使用以下指令执行多个签名时:https://github.com/thomasjbradley/signature-pad/blob/master/examples/accept-multiple-signatures.html

当我将类"sigPad"从Form标签移动到Div标签时(如链接中的示例)，则domPDF创建不起作用。"没有找到图像"。

因此，为了把我的问题归结为它的本质，我把它缩小到这个问题。为什么表单不工作与我的domPDF脚本，如果我移动类"sigPad"的div。

还有，我有任何选项来解决这个问题吗?我有一个大的形式，现在与dompdf工作，我想添加几个签名到它。我不希望在表单标签中有类。

下面是一个没有多个签名的例子，只是试图将sigPad类移动到div而不是表单中。如果它在Form标签中，它可以工作，如果它在div标签中，它不能:

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");
?>

任何帮助都将非常感激。谢谢你！

当您将.sigPad类从FORM元素移动到div元素时，您不再具有可以触发的submit()事件。此事件仅对FORM元素可用。因为这个事件没有被触发，签名图像数据不会被复制到INPUT元素中。

尝试对示例进行如下更新:

<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>

更新后的JavaScript并不完美，可能对您来说有点困惑，但它足够灵活，可以处理任意数量的签名字段。当表单提交时，将为签名垫容器解析文档。然后使用each()结构将input.output元素的值设置为签名簿的值。

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");
?>

我喜欢用三元操作符来初始化变量，但我很邪恶。此外，我们应该始终注意对来自客户机的数据执行额外的验证。因此，我可能会增强PHP，至少看看base64数据是否实际上是base64(而不是HTML片段)。

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

你甚至可以更进一步，检查它是否真的是一个图像。但是我将把它留给你们作为练习

相关文章：