0

私は初心者なので、私の質問がばかげている場合はご容赦ください。私の問題は、https ://github.com/thomasjbradley/signature-pad/blob/master/examples/accept-multiple-signatures.html の手順を使用して複数の署名を実行しようとするときです。

クラス「sigPad」を Form タグから Div タグに移動すると (リンクの例のように)、domPDF の作成が機能しません。「画像が見つかりません」。

したがって、私の問題を本質的に煮詰めるために、この問題に絞り込みました。クラス「sigPad」を div に移動すると、domPDF スクリプトでフォームが機能しないのはなぜですか。

また、これを修正するオプションはありますか? dompdf で動作する大きなフォームがあり、いくつかの署名を追加したいと考えています。フォームタグにクラスを持たないことをお勧めします。

これは複数の署名のない例で、sigPad クラスをフォームではなく div に移動しようとしているだけです。Form タグにある場合は機能しますが、このような div タグにある場合は機能しません。

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

どんな助けでも大歓迎です。ありがとう！

4

1 に答える 1

0

クラスを FORM 要素から DIV 要素に移動すると、トリガーできるイベントが.sigPadなくなります。submit()このイベントは、FORM 要素でのみ使用できます。このイベントはトリガーされないため、署名画像データは INPUT 要素にコピーされません。

サンプルに次の更新のようなものを試してください。

HTML

<form method="post" action="pdf.php">
  <div class="sigPad">
    <canvas class="pad" width="198" height="55"></canvas>
    <input type="hidden" name="output1" class="output" />
  </div>
  <div class="sigPad">
    <canvas class="pad" width="198" height="55"></canvas>
    <input type="hidden" name="output2" class="output" />
  </div>
  <button type="submit">I accept the terms of this agreement.</button>
</form>

JavaScript

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

更新された JavaScript は完璧ではなく、少し混乱するかもしれませんが、任意の数の署名フィールドを処理するのに十分な柔軟性があります。何が起こっているかというと、フォームが送信されると、ドキュメントが署名パッド コンテナー用に解析されます。次に、each()構成を使用して、input.output要素の値を署名パッドの値に設定します。

PHP

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

変数を初期化するための三項演算子が好きですが、私は悪です。また、クライアントからのデータに対して追加の検証を実行することにも常に注意する必要があります。したがって、PHP を拡張して、少なくとも base64 データが実際に base64 であるかどうか (たとえば、HTML フラグメントではないかどうか) を確認することができます。

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

さらに一歩進んで、実際に画像かどうかを確認することもできます。しかし、私はあなたのための演習としてそれを残します.

于 2014-05-06T22:20:32.243 に答える