How to add a signature to a pdf document in a specific place using forms in html, css, js

Question

i tried using jsPdf, signature pad but all i could do is add the signature to a pdf created using forms but i couldn't put the signature in the desired place.

i need a solution for this if I input a PDF that has a written place for e-signature, how to put it in the desired place? here's the sample pdf pdf-link

<script>
    import { onMount } from 'svelte';
    import SignaturePad from 'signature_pad';
    import html2canvas from 'html2canvas';
    import jsPDF from 'jspdf';

    let signaturePad;
    let canvasImg = '';

    onMount(() => {
        const canvas = document.getElementById('signatureCanvas');
        signaturePad = new SignaturePad(canvas);
        const generatePDF = async () => {
            const downloadButton = document.getElementById('downloadButton');
            downloadButton.innerHTML = 'Currently downloading, please wait';

            //Downloading
            const whatToPrint = document.getElementById('whatToPrint');
            const doc = new jsPDF('l', 'pt');

            await html2canvas(whatToPrint, {
                width: 530
            }).then((canvas) => {
                //Canvas (convert to PNG)
                doc.addImage(canvas.toDataURL('image/png'), 'PNG', 5, 5, canvas.width, canvas.height);
            });

            doc.save('Document.pdf');

            //End of downloading

            downloadButton.innerHTML = 'Click to download';
        };

        window.generatePDF = generatePDF;
    });
    function clearSignature() {
        signaturePad.clear();
    }

    function saveSignature() {
        const signatureData = signaturePad.toDataURL(); // signature as base64 data URL
        console.log(signatureData);
    }
    function saveSignatureImg() {
        const signatureData = signaturePad.toDataURL('image/png'); //  signature as image data URL
        canvasImg = signatureData;
    }
</script>

<div id="" style="width: 500px; padding: 10px; background-color: antiquewhite; margin:0 auto;">
    <h1>Sample form with signature</h1>
    <div class="form" id="whatToPrint">
        <form action="">
            <label for="h">firstname</label>
            <input id="h " type="text" />
            <label for="h">lastname</label>
            <input id="h " type="text" />
            <label for="h">age</label>
            <input id="h " type="number" />
            <label for="h">Salary</label>
            <input id="h " type="number" />
            <label for="h">School/University</label>
            <input id="h " type="text" />

            {#if canvasImg}
                <img id="signatureCanvas" src={canvasImg} alt="canvasImg" />
            {/if}
            <label for="h">....................</label>
            <label for="h">signature</label>
        </form>
    </div>
    <section class="container">
        <canvas id="signatureCanvas" width="400" height="200"></canvas>

        <div>
            <button on:click={clearSignature}>Clear</button>
            <button on:click={saveSignatureImg}>Save As Img</button>
            <button on:click={saveSignature}>Save</button>
        </div>
    </section>
    <a href="javascript:generatePDF()" id="downloadButton">Click to download</a>
</div>

<style>
    .form {
        background-color: pink;
    }
    .form form {
        display: flex;
        flex-direction: column;
        background-color: antiquewhite;
    }
    #signatureCanvas {
        margin-top: 15px;
        border: 1px solid #000;
        width: 100%;
        max-width: 400px;
        height: 200px;
    }
</style>

signature has to be put on the specific place on pdf by signing on the webpage.any package is welcome.

Answer 1

I was able to add the signature on its place:

Here are the code changes:

onMount(() => {
    const canvas = document.getElementById('signatureCanvas');
    signaturePad = new SignaturePad(canvas);
    console.log(signaturePad)
    console.log(signaturePad.canvas)
    const generatePDF = async () => {
        const downloadButton = document.getElementById('downloadButton');
        downloadButton.innerHTML = 'Currently downloading, please wait';

        //Downloading
        const whatToPrint = document.getElementById('whatToPrint');
        const doc = new jsPDF('l', 'pt');

        await html2canvas(whatToPrint, {
            width: 600
        }).then((canvas) => {
            //Canvas (convert to PNG)
            doc.addImage(canvas.toDataURL('image/png'), 'PNG', 5, 5, canvas.width, canvas.height);
            doc.addImage(signaturePad.canvas, 'PNG', 0, canvas.height - 45, signaturePad.canvas.width / 4, signaturePad.canvas.height / 4);
        });

        doc.save('Document.pdf');

        //End of downloading

        downloadButton.innerHTML = 'Click to download';
    };

    window.generatePDF = generatePDF;
});

I added one more .addImage with the canvas from signaturePad object. For the height I am taking the previous canvas height minus 45. I think the number 45 can be replaced with taking the last element height and divided by 2. After that I resize the signature canvas, because by default it came too big.

Answer 2

The proposed sample link is to an e-sign service. Thus it is not possible to simply add a signature, as it needs to be validated as an embedded timestamped image within the software as a service.

JS.PDF is not suited to this task. NOR is it suited to fill Acroform fields in general, as it does not interact with 3rd party forms.