我正在使用Thomas J Bradley's plugin 在 html 表单的底部绘制两个签名，然后使用 dompdf 将其转换为 pdf 并使用 sendmail 作为附件通过电子邮件发送。
一切都很好，除了我似乎无法将签名重绘到 pdf 文件而不将它们保存到我想避免的磁盘。
先生。 Bradley 提供了several methods for regenerating the signature，但我需要一些关于如何将签名数据与表单值一起传递给 pdf 转换器的建议，最好是“即时”（不将数据保存到磁盘或数据库）。
我将不胜感激。 如果您需要任何示例代码，请告诉我。
提前谢谢你！
【问题讨论】：
标签： javascript php dompdf
您应该捕获签名图像，而不是重新生成签名。签名板可以将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
【讨论】：
sig 应该在文档加载函数之外初始化。我最初写它sig 的方式是本地的jQuery 事件处理程序。我更新了我的示例代码。
布莱恩，你摇滚！
我必须执行以下操作才能使其正常工作，因为我们正在检查包含 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 !");
}
?>
非常感谢 dompdf 团队 @Thomas J Bradley 和拯救了这一天的 @BrianS。
PS：@BrianS我不能投票给你的答案，因为我还是新手，而且还没有 15 的最低声望。
【讨论】：