How to Insert Signatures into PDF Documents with HTMLnd JavaScript

An e-signature is a digital form of a handwritten signature that allows individuals to sign documents electronically. It has become an essential tool for businesses and organizations to streamline the signing process, enabling documents to be signed in just a few clicks from anywhere in the world. In this article, we will explore how to insert a signature into PDF documents using HTML5, JavaScript, and Dynamsoft Document Viewer.

Demo Video: Sign PDF Documents with Electronic Signature

Online Demo

https://yushulx.me/web-document-annotation/

Prerequisites

• Dynamsoft Capture Vision Trial License: Obtain a 30-day free trial license to unlock the full capabilities of Dynamsoft Products.

• Dynamsoft Document Viewer: This JavaScript SDK enables seamless viewing of PDF, JPEG, PNG, TIFF, and BMP files. It also features PDF annotation rendering and saving. Download link: https://www.npmjs.com/package/dynamsoft-document-viewer.

Implementing Signature Functionality for Web PDF Editor

Our web document annotation project, built with the Dynamsoft Document Viewer, is highly extensible. It currently includes barcode detection for PDF documents. In the following sections, we will guide you through the process of adding an electronic signature to PDF documents step by step.

Step 1: Get the Source Code

1. Clone the source code from the GitHub repository:
   

   git clone https://github.com/yushulx/web-twain-document-scan-management.git
   

2. Navigate to the document_annotation directory:
   

   cd web-twain-document-scan-management/examples/document_annotation
   

3. Open the project in Visual Studio Code.

Step 2: Add a Signature Button

1. In main.css, add a material icon for the signature button:
   

   .icon-stylus::before {
       content: "edit";
   }
   
   .icon-stylus {
       display: flex;
       font-size: 1.5em;
   }
   
   

   

2. Define the signature button and add it to the toolbar in main.js:
   

   const signatureButton = {
       type: Dynamsoft.DDV.Elements.Button,
       className: "material-icons icon-stylus",
       tooltip: "Sign the document",
       events: {
           click: "sign",
       }
   }
   
   const pcEditViewerUiConfig = {
       type: Dynamsoft.DDV.Elements.Layout,
       flexDirection: "column",
       className: "ddv-edit-viewer-desktop",
       children: [
           {
               type: Dynamsoft.DDV.Elements.Layout,
               className: "ddv-edit-viewer-header-desktop",
               children: [
                   {
                       type: Dynamsoft.DDV.Elements.Layout,
                       children: [
                           Dynamsoft.DDV.Elements.ThumbnailSwitch,
                           Dynamsoft.DDV.Elements.Zoom,
                           Dynamsoft.DDV.Elements.FitMode,
                           Dynamsoft.DDV.Elements.Crop,
                           Dynamsoft.DDV.Elements.Filter,
                           Dynamsoft.DDV.Elements.Undo,
                           Dynamsoft.DDV.Elements.Redo,
                           Dynamsoft.DDV.Elements.DeleteCurrent,
                           Dynamsoft.DDV.Elements.DeleteAll,
                           Dynamsoft.DDV.Elements.Pan,
                           Dynamsoft.DDV.Elements.AnnotationSet,
                           qrButton,
                           checkButton,
                           scanButton,
                           clearButton,
                           signatureButton,
                       ],
                   },
                   {
                       type: Dynamsoft.DDV.Elements.Layout,
                       children: [
                           {
                               type: Dynamsoft.DDV.Elements.Pagination,
                               className: "ddv-edit-viewer-pagination-desktop",
                           },
                           loadButton,
                           downloadButton,
                       ],
                   },
               ],
           },
           Dynamsoft.DDV.Elements.MainView,
       ],
   };
   

3. Add the click event handler for the signature button:
   

   editViewer.on("sign", sign);
   
   function sign() {
       ...
   }
   

Step 3: Create a Pop-up Dialog for Signature Input

The pop-up dialog for signature input includes the following elements:

• A canvas element for drawing the signature.
• Color options for changing the signature color.
• A stroke slider to adjust signature thickness.
• X and Y coordinates for positioning the signature.
• A save button to insert the signature into the PDF document.
• A cancel button to close the dialog.
• A redraw button to erase the signature.

HTML Code

git clone https://github.com/yushulx/web-twain-document-scan-management.git

Add event listeners for mouse events:

cd web-twain-document-scan-management/examples/document_annotation

Add event listeners for color and stroke options:

.icon-stylus::before {
    content: "edit";
}

.icon-stylus {
    display: flex;
    font-size: 1.5em;
}

Implement the drawing functions:

const signatureButton = {
    type: Dynamsoft.DDV.Elements.Button,
    className: "material-icons icon-stylus",
    tooltip: "Sign the document",
    events: {
        click: "sign",
    }
}

const pcEditViewerUiConfig = {
    type: Dynamsoft.DDV.Elements.Layout,
    flexDirection: "column",
    className: "ddv-edit-viewer-desktop",
    children: [
        {
            type: Dynamsoft.DDV.Elements.Layout,
            className: "ddv-edit-viewer-header-desktop",
            children: [
                {
                    type: Dynamsoft.DDV.Elements.Layout,
                    children: [
                        Dynamsoft.DDV.Elements.ThumbnailSwitch,
                        Dynamsoft.DDV.Elements.Zoom,
                        Dynamsoft.DDV.Elements.FitMode,
                        Dynamsoft.DDV.Elements.Crop,
                        Dynamsoft.DDV.Elements.Filter,
                        Dynamsoft.DDV.Elements.Undo,
                        Dynamsoft.DDV.Elements.Redo,
                        Dynamsoft.DDV.Elements.DeleteCurrent,
                        Dynamsoft.DDV.Elements.DeleteAll,
                        Dynamsoft.DDV.Elements.Pan,
                        Dynamsoft.DDV.Elements.AnnotationSet,
                        qrButton,
                        checkButton,
                        scanButton,
                        clearButton,
                        signatureButton,
                    ],
                },
                {
                    type: Dynamsoft.DDV.Elements.Layout,
                    children: [
                        {
                            type: Dynamsoft.DDV.Elements.Pagination,
                            className: "ddv-edit-viewer-pagination-desktop",
                        },
                        loadButton,
                        downloadButton,
                    ],
                },
            ],
        },
        Dynamsoft.DDV.Elements.MainView,
    ],
};

All paths are stored in the drawingHistory array. The redrawCanvas function iterates through the array and redraws the paths on the canvas.

Add event listeners for the OK, Redraw, and Cancel buttons:

editViewer.on("sign", sign);

function sign() {
    ...
}

Step 4: Insert Signatures into Documents

To insert the signature into the PDF document:

1. Convert the canvas to a blob:
   

   <div>
   
   
   
   <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173421499729336.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to Insert Signatures into PDF Documents with HTMLnd JavaScript"></p>
   
   <p><strong>JavaScript code for the signature input dialog</strong></p>
   
   <ol>
   <li>
   <p>Initialize the canvas and drawing context:<br>
   </p>
   <pre class="brush:php;toolbar:false">let canvas = document.getElementById("signatureCanvas");
   let ctx = canvas.getContext("2d");
   let isDrawing = false;
   let color = "black"; 
   let strokeWidth = 3;  
   let drawingHistory = []; 
   canvas.width = 500;
   canvas.height = 300;
   

2. Get the current page ID and page data:
   

   canvas.addEventListener("mousedown", startDrawing);
   canvas.addEventListener("mousemove", draw);
   canvas.addEventListener("mouseup", stopDrawing);
   canvas.addEventListener("mouseout", stopDrawing);
   

3. Create new stamp annotations with the signature image:
   

   document.getElementById("blue").addEventListener("click", () => {
       color = "blue";
       redrawCanvas();
   });
   
   document.getElementById("red").addEventListener("click", () => {
       color = "red";
       redrawCanvas();
   });
   
   document.getElementById("black").addEventListener("click", () => {
       color = "black";
       redrawCanvas();
   });
   
   document.getElementById("strokeSlider").addEventListener("input", (e) => {
       strokeWidth = e.target.value;
       redrawCanvas();
   });
   

   

Source Code

https://github.com/yushulx/web-twain-document-scan-management/tree/main/examples/document_annotation