0

我正在尝试创建一个 PHP 表单，在点击提交后输出表单中所有值的 PDF（使用 mPDF）。我已经包含了 jSignature，它接受用户绘制的电子签名。然后将签名转换为图像并在文本区域中输出数据 URI 字符串。

            <div id="signature"></div><br/>

            <input type='button' id='click' value='click'>
            <textarea id='output' name="signature"></textarea><br/>

            <!-- Preview image -->
            <img src='' id='sign_prev' style='display: none;' />

            <!-- Script -->
            <script>
            $(document).ready(function() {

            // Initialize jSignature
            var $sigdiv = $("#signature").jSignature({'UndoButton':true});

            $('#click').click(function(){
            // Get response of type image
            var data = $sigdiv.jSignature('getData', 'image');

            // Storing in textarea
            $('#output').val(data);

            // Alter image source 
            $('#sign_prev').attr('src',"data:"+data);
            $('#sign_prev').show();
            });
            });
            </script>
            <button type="submit" class="btn btn-success btn-lg">Submit</button>

我有另一个文件，它使用输入区域中的名称属性来显示每个输入字段中的值以显示在 PDF 上。由于签名以数据 URI 字符串的形式出现，因此我必须在创建 PDF 之前将其转换回 png 图像。我现在可以确定的是，我能够检索数据 URI 字符串，并且能够替换它附带的“image/png;base64”字符串，所以我剩下的就是数据本身。但是我正在努力将 URI 解码回图像，并且我不确定应该如何将其显示为图像。

<?php


require_once __DIR__ . '/vendor/autoload.php';


//grab variables
$inspection = $_POST['inspection'];
$ccOfficer = $_POST['cco-name'];
$inspector = $_POST['inspector'];
$tower = $_POST['tower'];
$strata = $_POST['strata'];
$suite = $_POST['suite'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$signature = $_POST['signature'];

//Create new PDf instance
$mpdf = new \Mpdf\Mpdf();

$mpdf->debug = true;

$signature = str_replace('image/png;base64,','', $signature);

$signatureDecode = base64_decode($signature);

$im = imagecreatefromstring($signatureDecode);

if(!$im) {
    die('Base64 value is not a valid image');
};

// $img_file = '/wti-report-form/images/signature.png';
// imagepng($im, $img_file, 0);

//$file = fopen($output_file, "wb");

//fwrite($file, $signatureDecode);
//fclose($file);

//Create our PDF
$data = '';


$data .= '<h1>ARC - NEW HOME WALK-THROUGH CHECKLIST</h1>';

//add data
$data .= '<strong>Inspection Date</strong> ' . $inspection . '<br/>';
$data .= '<strong>Customer Care Officer</strong> ' . $ccOfficer . '<br/>';
$data .= '<strong>This Suite was inspected by</strong> ' . $inspector . '<br/>';
$data .= '<strong>Tower #</strong> ' . $tower . '<br/>';
$data .= '<strong>Strata Lot #</strong> ' . $strata . '<br/>';
$data .= '<strong>Suite #</strong> ' . $suite . '<br/>';
$data .= '<strong>Email</strong> ' . $phone . '<br/>';
$data .= '<strong>Phone</strong> ' . $email . '<br/>';
//$data .= "<img src='" . $file . "'/>";    
//$data .= '<p>' . $signature . '</p>';    

//Write PDF
$mpdf->WriteHTML($data);

//output to the browser

$mpdf->Output('myfile.pdf', 'I');
?>

任何帮助将不胜感激。谢谢！:)

4

1 回答 1

1

据我所知，您可以在 img 标签中使用 base64 数据字符串，而 mpdf 将正确呈现 PDF，您尝试过这个解决方案吗？

$data.='<img src="data:image/png;base64,'.$signature.'" />';
于 2019-11-26T23:09:50.707 回答