Signature-Pad DomPDF 和多重签名答案

【问题标题】：Signature-Pad DomPDF and Multiple SignaturesSignature-Pad DomPDF 和多重签名
【发布时间】：2014-06-23 15:11:47
【问题描述】：

我是新手，如果我的问题很愚蠢，请原谅。我的问题是当我尝试使用此处的说明进行多个签名时：https://github.com/thomasjbradley/signature-pad/blob/master/examples/accept-multiple-signatures.html

当我将“sigPad”类从 Form 标签移动到 Div 标签（如链接中的示例中）时，domPDF 创建不起作用。 “找不到图像”。

因此，为了将我的问题归结为本质，我将其范围缩小到这个问题。如果我将类“sigPad”移动到 div，为什么表单不能与我的 domPDF 脚本一起使用。

另外，我有什么办法可以解决这个问题吗？我有一个现在可以与 dompdf 一起使用的大型表单，我想为其添加几个签名。我宁愿没有表单标签中的类。

这是一个没有多个签名的示例，只是试图将 sigPad 类移动到 div 而不是表单中。如果它在 Form 标签中它可以工作，如果它在像这样的 div 标签中它不会：

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

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： javascript php jquery dompdf signaturepad

【解决方案1】：

当您将 .sigPad 类从 FORM 元素移动到 DIV 元素时，您不再有可以触发的 submit() 事件。此事件仅适用于 FORM 元素。由于未触发此事件，因此不会将签名图像数据复制到您的 INPUT 元素中。

尝试对您的示例进行以下更新：

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>

更新后的 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");
?>

我喜欢ternary operators 来初始化变量，但我很邪恶。此外，我们应该始终注意对来自客户端的数据进行额外的验证。所以我可能会增强 PHP 以至少查看 base64 数据是否实际上是 base64（而不是 HTML 片段）。

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

您甚至可以更进一步，检查它是否真的是一张图片。但我会把它留给你做练习。

【讨论】：

这太棒了！非常感谢 BrianS，我无法告诉你这对我有多大帮助。我将继续验证信息并调整代码以满足我的需求。这让我越过了我正在撞的墙。我不能投票，因为我缺乏声誉，但我会尽快投票。一百万谢谢你。 :D