How can I detect where to stamp an image in PDF with javascript

Question

Hello

I'm trying to implement a little project that allow me to sign a PDF document, I already implement an Html 5 pad to draw the signature and get the Image to stamp into the pdf. I'm using the signature_pad library from Github :

var canvas = document.querySelector("canvas");
var signaturePad = new SignaturePad(canvas);
signaturePad.toDataURL(); // save image as PNG
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");
signaturePad.clear();
signaturePad.isEmpty();
signaturePad.off();
signaturePad.on();

My big problem is how can I know the place where the user have to stamp the signature into the pdf, because the pdf it is not the same, user could upload it's own pdf.

Could anyone help me with any orientation about this, I really appreciate your help.

Answer 1

I have done something exactly like this:

• Upload the PDF to the server.

• Use GhostScript to generate images for each of the pages.

• Use pdftk to create a report on the pdf.

• Get the image dimensions from the report. Note that some pdf's are rotated so for example if rotation in the report is 270 (270/90 = odd) you must swap width and height.

• Use jquery to allow drag and drop of signature locations over a div with the generated image pages as content. Set the images to fixed width so that you can use that number to calculate position later.

• Calculate the absolute position of the signature locations relative to each page. It's important to get the position per page, not for the entire document. Height will not be accurate enough for the entire document, causing position to be off over multiple pages.

• Use wkhtmltopdf to generate a pdf overlay with just the signatures. Use exact page size in mm (as you retrieved from the report), not a preset page size. If your absolute measurements are in pixels(points) you must convert to mm or vice versa (0.352777.. pixels per mm).

• When generating the pdf html, you can use page-break-after: always !important; to start a new page, then absolute position the signatures in a div after that.

• Use pdftk to merge the overlay pdf with the original.