Подпись pad и dompdf

Я использую Thomas J Bradley's plugin для рисования двух подписи внизу формы html, которая затем преобразуется в pdf с использованием dompdf и отправляется по электронной почте в виде вложения с использованием sendmail.Подпись pad и dompdf

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

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

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

Спасибо заранее!

источник

2013-07-01 katalin_2003

Брайан, вы молодцы! Я должен был сделать следующее, чтобы заставить его работать, поскольку мы проверяли эту строку, включая 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 Брэдли, то dompdf team и @BrianS, который спас день.

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

источник

2013-07-02 09:57:33

не беспокоится ... может быть, кто-то еще поддержит ответ. Тем не менее, вы можете проверить это, ответив на ваш вопрос (так как он ваш). – BrianS

Вместо регенерации подписи вы должны захватить изображение подписи. Подпись Pad может return the signature as an image закодирована как data URI. dompdf понимает URI данных, поэтому вы можете использовать это для создания своего PDF-файла. Если вы настроите таргетинг на платформу, которая не поддерживает этот метод, у автора есть много вариантов для converting the signature server side.

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

Я не использовал Signature Pad, поэтому я использую автора HTML template в качестве основы для кода примера.

Client Side

<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>

Server Side

<?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 от How to check if a string is base64 valid

источник

2013-07-01 17:08:08 BrianS

Здравствуйте, Брайан. Большое вам спасибо за ваш ответ. К сожалению, это не отразится на pdf, но я думаю, что мы недалеко. Вот небольшой пример с использованием вашего примера: http://www.filedropper.com/test_13 Если i echo $ img_output после else {// исключение логики ... "ваша подпись недействительна"}, я получаю красивая строка этого формата: [{"lx": 20, "ly": 34, "mx": 20, "my": 34}, ...]. Смогу ли я сделать линию в pdf, используя эти? Просто идея. –

Небольшая ошибка с моей стороны. Переменная 'sig' должна быть инициализирована вне функции загрузки документа. Способ, которым я изначально написал это 'sig', был локальным для обработчика события jQuery. Я обновил свой пример кода. – BrianS

ответ

Смежные вопросы