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.
https://yushulx.me/web-document-annotation/
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.
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.
Clone the source code from the GitHub repository:
git clone https://github.com/yushulx/web-twain-document-scan-management.git
Navigate to the document_annotation directory:
cd web-twain-document-scan-management/examples/document_annotation
Open the project in Visual Studio Code.
In main.css, add a material icon for the signature button:
.icon-stylus::before {
content: "edit";
}
.icon-stylus {
display: flex;
font-size: 1.5em;
}
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,
],
};
Add the click event handler for the signature button:
editViewer.on("sign", sign);
function sign() {
...
}
The pop-up dialog for signature input includes the following elements:
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() {
...
}
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;
Get the current page ID and page data:
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
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();
});
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
