电子签名是手写签名的数字形式，允许个人以电子方式签署文档。它已成为企业和组织简化签名流程的重要工具，只需在世界任何地方单击几下即可签署文档。在本文中，我们将探讨如何使用 HTML5、JavaScript 和 Dynamsoft Document Viewer 将签名插入 PDF 文档。
https://yushulx.me/web-document-annotation/
Dynamsoft Capture Vision 试用许可证：获取 30 天免费试用许可证以解锁 Dynamsoft 产品的全部功能。
Dynamsoft 文档查看器：此 JavaScript SDK 可无缝查看 PDF、JPEG、PNG、 TIFF 和 BMP 文件。它还具有 PDF 注释渲染和保存功能。下载链接：https://www.npmjs.com/package/dynamsoft-document-viewer。
我们的 Web 文档注释项目是使用 Dynamsoft Document Viewer 构建的，具有高度可扩展性。目前它包括 PDF 文档的条形码检测。在以下部分中，我们将逐步指导您完成向 PDF 文档添加电子签名的过程。
从 GitHub 存储库克隆源代码：
git clone https://github.com/yushulx/web-twain-document-scan-management.git
导航到 document_annotation 目录：
cd web-twain-document-scan-management/examples/document_annotation
在 Visual Studio Code 中打开项目。
在main.css中，为签名按钮添加材质图标：
.icon-stylus::before {
content: "edit";
}
.icon-stylus {
display: flex;
font-size: 1.5em;
}
定义签名按钮并将其添加到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,
],
};
添加签名按钮的点击事件处理程序：
editViewer.on("sign", sign);
function sign() {
...
}
签名输入的弹出对话框包含以下元素：
HTML 代码
git clone https://github.com/yushulx/web-twain-document-scan-management.git
为鼠标事件添加事件监听器：
cd web-twain-document-scan-management/examples/document_annotation
添加颜色和描边选项的事件侦听器：
.icon-stylus::before {
content: "edit";
}
.icon-stylus {
display: flex;
font-size: 1.5em;
}
实现绘图功能：
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,
],
};
所有路径都存储在drawingHistory数组中。 redrawCanvas 函数迭代数组并在画布上重绘路径。
为“确定”、“重绘”和“取消”按钮添加事件侦听器：
editViewer.on("sign", sign);
function sign() {
...
}
要将签名插入 PDF 文档：
将画布转换为斑点：
<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;
获取当前页面ID和页面数据：
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
使用签名图像创建新的图章注释：
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
以上是如何使用 HTMLnd JavaScript 将签名插入 PDF 文档的详细内容。更多信息请关注PHP中文网其他相关文章！
