Signature-Pad DomPDF и несколько подписей

Я новичок, так что извините, если вопрос глупый. Моя проблема заключается в том, что я пытаюсь сделать несколько подписей, используя инструкции здесь: https://github.com/thomasjbradley/signature-pad/blob/master/examples/accept-multiple-signatures.html

Когда я перемещаю класс "sigPad" из тега Form в тег Div (как в примере по ссылке), создание domPDF не работает. "Изображение не найдено".

Итак, чтобы свести мою проблему к ее сути, я сузил ее до этого вопроса. Почему форма не работает с моим скриптом domPDF, если я переношу класс "sigPad" в div.

Кроме того, есть ли у меня какие-либо варианты, чтобы исправить это? У меня есть большая форма, которая теперь работает с dompdf, и я хотел бы добавить к ней несколько подписей. Я бы предпочел не иметь класс в теге формы.

Вот пример без нескольких подписей, просто попытка переместить класс sigPad в div, а не в форму. Если он находится в теге формы, он работает, если он находится в теге 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");
?>

Любая помощь будет принята с благодарностью. Спасибо!


javascript php jquery dompdf signaturepad
person MonteVista    schedule 06.05.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Когда вы перемещаете класс .sigPad из элемента FORM в элемент DIV, у вас больше нет события 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';

Вы даже можете сделать еще один шаг и проверить, действительно ли это изображение. Но я оставлю это в качестве упражнения для вас.

person BrianS    schedule 06.05.2014
comment
Это здорово! Большое спасибо BrianS, я не могу сказать вам, насколько это помогло мне. Я перейду к проверке информации и настройке кода в соответствии со своими потребностями. Это заставило меня перелезть через стену, в которую я врезался. Я не могу проголосовать, потому что мне не хватает репутации, но я сделаю это, как только сделаю это. Миллион благодарностей вам. :D - person MonteVista; 07.05.2014