簽名板和dompdf
[英]Signature pad and dompdf
問題描述
我使用Thomas J Bradley的插件在html表單的底部繪制兩個簽名，然后使用dompdf將其轉換為pdf，並使用sendmail通過電子郵件作為附件發送。
一切都運行良好，除了我似乎無法將簽名重繪到pdf文件而不將它們保存到磁盤，我想避免。
Bradley先生提供了幾種重新生成簽名的方法，但我需要一些關於如何將簽名數據與表單值一起傳遞給pdf轉換器的建議，最好是“即時”（不將數據保存到磁盤或數據庫）。
我很感激任何答案。 如果您需要任何示例代碼，請告訴我。
先感謝您！
2 個解決方案
解決方案1
6 2013-07-01 17:08:08
您應該捕獲簽名圖像，而不是重新生成簽名。 簽名板可以將簽名作為編碼為數據URI 的圖像返回 。 dompdf了解數據URI，因此您可以使用它來生成PDF。 如果您的目標是不支持該方法的平台，則作者可以使用大量選項來轉換簽名服務器端 。
簡而言之，該過程是捕獲表單提交時的圖像輸出，將其傳遞給服務器，並使用PDF生成簽名動態填充HTML。 無需保存圖像。
我沒有使用過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"
}
?>
將簽名圖像簡單驗證為有效的base64， 如何檢查字符串是否為base64有效
解決方案2
2 已采納 2013-07-02 09:57:33
布萊恩，你搖滾！ 我必須執行以下操作才能使其工作，因為我們正在檢查此行包含的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>
和awesomeness（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個最低聲譽。
簽名板DomPDF和多個簽名
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.