phphtml5-canvasbase64pdftkfdf

How to transfer a user's signature from a webform to a pdf template?


I have a web form that uses an HTML5 canvas element to allow users to sign their name. When the form is submitted, all field values and the base64 string (e.g. "data:image/png;base64,blahblahetc") containing the user's signature are processed and stored.

I'd like to fill my pdf template with the submitted data and write the signature to the form but I am struggling with the signature task.

I found one technique while researching that suggests I could write the signature as a pdf button using:

<< /T (button1)/APRef << /N << /F (http://www.yoursite.com/pfds/icons.pdf)/Name (icon3)>> >> >> 

However, I can't manage to get this to work. I don't know if the signature must be prepared as .png, .pdf, or something else. (I can successfully generate a .png on the server, but haven't tried to apply it to the .pdf because I don't know if I need it.)

I am using pdftk to fill my template .pdf with the dynamic .fdf file. Do I need to perform any special preparations on the signature button? I think I read something about setting the Layout to "Icon Only."


Solution

  • Since I could not find a way to apply the signature to the pdf as a button, I had to fiddle and hack to get all form data and signatures from the server onto a new pdf.

    First fopen/fwrite the form values to new fdf, then use pdftk to generate an unsigned pdf:

    echo exec("cd $submissions_path/; $pdftk \"$template\" fill_form \"$fdf\" output \"$unsigned_pdf\"; chmod 777 \"$unsigned_pdf\";");
    

    Then fopen/fwrite my base64 signatures to signature images:

    $fp=fopen("$submissions_path/$simg","wb");
    fwrite($fp,base64_decode($scode));
    fclose($fp);
    

    Then generate an .html watermark to be converted to a watermark .pdf using mPDF (please excuse the use of tables, mPDF didn't like my <div>'s):

    $watermark_pdf="InstallOrder_{$submissionID}_Watermark.pdf";
    $watermark_html="<table style=\"width:792px;height:1123px;\"><tr>";
    $watermark_html.="<td colspan=\"2\" style=\"padding-top:900px;padding-left:70px;width:240px;height:20px;\">{$watermark[CustomerSignature]}</td>";
    $watermark_html.="</tr><tr>";
    $watermark_html.="<td style=\"padding-top:16px;padding-left:69px;width:240px;height:20px;\">{$watermark[OwnerSignature]}</td>";
    $watermark_html.="<td style=\"padding-top:16px;padding-left:169px;width:240px;height:20px;\">{$watermark[ManagerSignature]}</td>";
    $watermark_html.="</tr></table>";
    include("../mpdf/mpdf.php"); //Include mPDF Class
    $mpdf=new mPDF('','',0,'',0,0,0,0,0,0,'P'); // Create new mPDF Document
    $mpdf->WriteHTML($watermark_html);
    $mpdf->Output("$watermark_pdf","F");    //save file to server - may include a path
    

    Finally, stamp the watermark.pdf onto the unsigned.pdf using pdftk again:

    echo exec("cd $submissions_path/; $pdftk \"$unsigned_pdf\" stamp \"$watermark_pdf\" output \"$pdf\"");
    

    The most tedious part is correctly setting the size and position of the signature images on the watermark html.