How to Insert Signatures into PDF Documents with HTMLnd JavaScript-JS Tutorial-php.cn

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

Clone the source code from the GitHub repository:
```
git clone https://github.com/yushulx/web-twain-document-scan-management.git
```
Copy after login
Copy after login
Navigate to the document_annotation directory:
```
cd web-twain-document-scan-management/examples/document_annotation
```
Copy after login
Copy after login
Open the project in Visual Studio Code.

Step 2: Add a Signature Button

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

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

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

Copy after login

How to Insert Signatures into PDF Documents with HTMLnd JavaScript

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,
    ],
};

Copy after login

Add the click event handler for the signature button:
```
editViewer.on("sign", sign);

function sign() {
    ...
}
```
Copy after login
Copy after login

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

Copy after login

Add event listeners for mouse events:

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

Copy after login

Add event listeners for color and stroke options:

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

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

Copy after login

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,
    ],
};

Copy after login

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() {
    ...
}

Copy after login

Step 4: Insert Signatures into Documents

To insert the signature into the PDF document:

Convert the canvas to a blob:

<div>



<p><img src="https://img.php.cn/upload/article/000/000/000/173421499729336.jpg" 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;

Copy after login

Get the current page ID and page data:

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

Copy after login

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();
});

Copy after login

How to Insert Signatures into PDF Documents with HTMLnd JavaScript

Source Code

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

The above is the detailed content of How to Insert Signatures into PDF Documents with HTMLnd JavaScript. For more information, please follow other related articles on the PHP Chinese website!