6

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

一切都很好，除了我似乎无法将签名重绘到 pdf 文件而不将它们保存到我想避免的磁盘上。

Bradley 先生提供了几种重新生成签名的方法，但我需要一些关于如何将签名数据与表单值一起传递给 pdf 转换器的建议，最好是“即时”（不将数据保存到磁盘或数据库）。

我会很感激任何答案。如果您需要任何示例代码，请告诉我。

先感谢您！

4

2 回答 2

9

您应该捕获签名图像，而不是重新生成签名。Signature Pad 可以将签名作为编码为数据 URI的图像返回。dompdf 了解数据 URI，因此您可以使用它来生成 PDF。如果您的目标平台不支持该方法，作者有很多选项可以转换签名服务器端。

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

我没有使用 Signature Pad，所以我使用作者的HTML 模板作为示例代码的基础。

客户端

<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

于 2013-07-01T17:08:08.800 回答
3

布赖恩，你摇滚！我必须执行以下操作才能使其正常工作，因为我们正在检查包含的这一行data:image/png;base64,。

但是在您的帮助和一些挖掘下，我获得了一个带有签名的pdf :) 这是代码以防将来有人需要它。

html部分 - 客户端：

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

和真棒（pdf.php） - 服务器端：

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

非常感谢 @Thomas J Bradley、dompdf 团队和@BrianS拯救了这一天。

PS：@BrianS我不能对你的答案投赞成票，因为我还是新手，并且缺乏 15 的最低声誉。

于 2013-07-02T09:57:33.100 回答