Блокнот для подписи и dompdf

Я использую плагин Томаса Дж. Брэдли для рисования двух подписей в нижней части html-формы, который затем преобразуется в pdf с помощью dompdf и отправляется по электронной почте в виде вложения с помощью sendmail.

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

Г-н Брэдли предоставил несколько методов повторного создания подписи, но мне нужны советы о том, как передавать данные подписи вместе со значениями формы в конвертер PDF предпочтительно «на лету» (без сохранения данных на диск или в базу данных).

Буду признателен за любой ответ. Если вам нужен пример кода, пожалуйста, дайте мне знать.

Заранее спасибо!


javascript php dompdf
person katalin_2003    schedule 01.07.2013    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Вместо повторной генерации подписи вы должны захватить изображение подписи. Блокнот для подписи может вернуть подпись в виде изображения, закодированного как URI данных. dompdf понимает URI данных, поэтому вы можете использовать это для создания PDF-файла. Если вы ориентируетесь на платформу, которая не поддерживает этот метод, у автора есть множество вариантов для преобразование подписи на стороне сервера.

В двух словах процесс заключается в захвате вывода изображения при отправке формы, передаче его на сервер и динамическом заполнении вашего HTML-кода подписью для создания PDF-файла. Нет необходимости сохранять изображение.

Я не использовал панель для подписи, поэтому использую 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

person BrianS    schedule 01.07.2013
comment
Привет, Брайан. Большое спасибо за ваш ответ. К сожалению, это не будет отображаться в формате PDF, но я думаю, что мы недалеко. Вот небольшой пример вашего примера: filedropper.com/test_13 Если я выведу $img_output после else{ // логика исключения ... ваша подпись недействительна } я получаю красивую строку такого формата: [{lx:20,ly:34,mx:20,my:34},…]. Смогу ли я нарисовать линию в pdf, используя их? Просто идея. - person katalin_2003; 02.07.2013
comment
Небольшая ошибка с моей стороны. Переменная sig должна быть инициализирована вне функции загрузки документа. То, как я изначально написал это sig, было локальным для обработчика событий jQuery. Я обновил свой пример кода. - person BrianS; 02.07.2013

arrow_upward
3
arrow_downward

Брайан, ты молодец! Мне пришлось сделать следующее, чтобы заставить его работать, так как мы проверяли, содержит ли эта строка 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 !");
}
?>

Большое спасибо @Thomas J Bradley, команде dompdf и @BrianS, которые спасли положение.

PS: @BrianS я не могу проголосовать за ваш ответ, так как я все еще новичок, и мне не хватает минимальной репутации 15 для этого .

person katalin_2003    schedule 02.07.2013
comment
не беспокойтесь ... возможно, кто-то еще поддержит ответ. Однако вы можете проверить это как ответ на свой вопрос (поскольку он ваш). - person BrianS; 02.07.2013