1

I have a sample PDF. I want to manipulate it with data (add fullname + date) and add a signature field. When the user opens the PDF on his browser and signs it, I want to save the pdf to my database and get notified on my backend side (when success).

I am familiar with php; thus I came across with 'fpdf' and 'tcpdf'. However, I couldn't figure out if what I want achieve is possible with those, but I don't think so. I can open pdf and add line from fpdf but I can't achieve anything with signatures.

What is the best/easiest way to achieve what I want to achieve? From php am I capable of such thing?

Should I try to generate the pdf from html? Is it possible to achieve what they are doing with C# in php? Or should I use completely different language for such thing?

Community
  • 1
  • 1
senty
  • 12,385
  • 28
  • 130
  • 260
  • I'm not sure exactly what you mean with signature. But my idea would be to use canvas `drawImage()` to process the signature as an image and then just implement that image inside the PDF document with the FPDF library. – icecub Sep 24 '16 at 06:25
  • What I mean by signature is [this](https://helpx.adobe.com/acrobat/using/signing-pdfs/_jcr_content/main-pars/procesure_0/proc_par/step_4/step_par/image.img.png/Sign_or_initial-1.png). Think like, the pdf is an agreement generated using user's name, details, etc. and signature field at the right end. The user has to sign the signature field; and once signed, it calls a function that notifies php and php saves the pdf to php and update database – senty Sep 24 '16 at 06:33
  • Ye that's exactly what I ment. Basicly what you do is design a html website that looks like the PDF. In your HTML document you can use Canvas where a user can draw (like Paint) a signature. Use `drawImage()` to turn that signature into an image. Lastly build a new PDF in php with FPDF putting it all together. It's easy to add an image to a PDF file with FPDF: http://www.fpdf.org/en/doc/image.htm – icecub Sep 24 '16 at 06:41
  • Remember that FPDF isn't able to edit existing PDF files. It's only capable of generating new ones. You have to design it from the start using the correct coördinates. If you want a library that generates a template for FPDF from an existing PDF file, you might want to take a look at [FPDI](https://www.setasign.com/products/fpdi/about) – icecub Sep 24 '16 at 06:50
  • After some more research, I decided to go with FPDF and create my pdf from html, because I thought it would be possible to create html elements like box for signature and submit button on html from backend, and add actions with javascript; but no luck yet. Do you think it's possible? – senty Sep 24 '16 at 15:56
  • Do you even read my comments? Because that's exactly what I've been explaining to you up till now.. – icecub Sep 24 '16 at 22:12
  • **[1]**: After having the signature, placing it to pdf as an image is fairly easy. My question getting the signature from the user. Now, I created a sample pdf with FPDF that has no signature input. I also achieved displaying it on the screen with iframe. My question is what is the proper way of adding a signature field to the pdf [which I expanded here](http://stackoverflow.com/questions/39681333/add-signature-field-on-existing-pdf). Briefly, 1) maybe I can get the generated pdf with ajax and add a signature field to the pdf before displaying it? – senty Sep 24 '16 at 22:27
  • **[2]:** 2) 1 with another php library? 3) display the pdf without signature (just the field as image to make it obvious) and place a div outside the iframe; Using signature pad is an option – senty Sep 24 '16 at 22:28
  • Oh lol, that's easy: http://www.fpdf.org/en/doc/line.htm Just draw 4 lines into a square on the document and done :) – icecub Sep 24 '16 at 22:32
  • If I do that, sign-able area is displayed but how will the user be able to sign it? On a separate div, outside of the iframe (pdf)? I want the user to actually sign it by clicking the signature field on the pdf on browser, if that's possible. – senty Sep 24 '16 at 22:36
  • 1
    Take a look at this answer: http://stackoverflow.com/questions/2368784/draw-on-html5-canvas-using-a-mouse - Run the code. User can draw signature, just save the result (as image) to the pdf – icecub Sep 24 '16 at 22:37
  • Oh, brilliant!! – senty Sep 24 '16 at 22:40
  • That's what I've been trying to tell you from the start, haha. Glad I could help you on your way :) – icecub Sep 24 '16 at 22:42
  • Just one quick question; what is the proper way of detecting if the signature input is empty with this way? – senty Sep 24 '16 at 22:57
  • There isn't really a fool proof way of detecting if an image is empty or not on the server side. You could try extracting the main colors like what is explained here: http://stackoverflow.com/questions/10290259/detect-main-colors-in-an-image-with-php and if it only returns 1 color, assume nothing was drawn. On the js side you could use the function that is called upon drawing to set a boolean variable to true. As long as that bool is false, display an alert that a signature must be drawn. – icecub Sep 24 '16 at 23:03

0 Answers0