javascript - 签名板和dompdf

Question

我正在使用 Thomas J Bradley's plugin用于在 html 表单底部绘制两个签名，然后使用 dompdf 将其转换为 pdf 并使用 sendmail 作为附件通过电子邮件发送。

一切都很好，除了我似乎无法在不将签名保存到磁盘的情况下将签名重新绘制到 pdf 文件上，我想避免这一点。

先生。布拉德利提供several methods for regenerating the signature但我需要一些关于如何将签名数据连同表单值传递给 pdf 转换器的建议，最好是“即时”(不将数据保存到磁盘或数据库)。

如有任何答复，我将不胜感激。 如果您需要任何示例代码，请告诉我。

提前致谢!

Answer 1

您应该捕获签名图像，而不是重新生成签名。签名板可以return the signature as an image编码为 data URI . dompdf 理解数据 URI，因此您可以使用它来生成 PDF。如果您的目标平台不支持该方法，作者有很多选项 converting the signature server side .

简而言之，该过程是捕获表单提交时的图像输出，将其传递到服务器，并使用签名动态填充您的 HTML 以生成 PDF。无需保存图像。

我没用过签名板，所以我用的是作者的HTML template作为示例代码的基础。

客户端

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

服务器端

<?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"
}
?>

对来自 How to check if a string is base64 valid 的签名图像作为有效 base64 的简单验证