Javascript 签名板和多个签名_Javascript_Php_Jquery_Dompdf_Signaturepad

Javascript 签名板和多个签名

javascript php jquery

Javascript 签名板和多个签名,javascript,php,jquery,dompdf,signaturepad,Javascript,Php,Jquery,Dompdf,Signaturepad,我是新手，如果我的问题很愚蠢，请原谅。我的问题是，当我尝试使用以下说明执行多个签名时：当我将类sigPad从Form标记移动到Div标记（如链接中的示例所示）时，domPDF创建就不起作用了。找不到图像所以，为了把我的问题归结为它的本质，我把它缩小到这个问题上。如果我将类sigPad移动到div，为什么表单不能与我的domPDF脚本一起工作还有，我有什么办法来解决这个问题吗？我有一个大的表单，现在可以使用dompdf，我想给它添加几个签名。我不希望类出现在表单标记中下面是一个没有多个签名

我是新手，如果我的问题很愚蠢，请原谅。我的问题是，当我尝试使用以下说明执行多个签名时：

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

所以，为了把我的问题归结为它的本质，我把它缩小到这个问题上。如果我将类sigPad移动到div，为什么表单不能与我的domPDF脚本一起工作

还有，我有什么办法来解决这个问题吗？我有一个大的表单，现在可以使用dompdf，我想给它添加几个签名。我不希望类出现在表单标记中

下面是一个没有多个签名的示例，只是尝试将sigPad类移动到div而不是表单中。如果它是在表单标记中工作的，如果它是在div标记中，则它不工作：

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

任何帮助都将不胜感激。谢谢大家!

当您将.sigPad类从FORM元素移动到DIV元素时，您不再有可以触发的提交事件。此事件仅对表单元素可用。由于未触发此事件，签名图像数据不会复制到输入元素中

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

HTML

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

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

你甚至可以更进一步，看看它是否真的是一幅图像。但我将把它作为练习留给你。

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

<script>
  $( document ).ready( function ( ) {
    $('.sigPad').signaturePad( );
  } );
  $( 'form' ).submit( function ( evt ) {
    $( '.sigPad' ).each( function ( idx , el ) {
      $( this ).find( '.output' ).val( $( this ).signaturePad( ).getSignatureImage( ) );
    } );
  } );  
</script>

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

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