如何使用 HTMLnd JavaScript 将签名插入 PDF 文档-js教程-PHP中文网

首页

web前端

js教程

如何使用 HTMLnd JavaScript 将签名插入 PDF 文档

Linda Hamilton

Dec 15, 2024 am 06:23 AM

电子签名是手写签名的数字形式，允许个人以电子方式签署文档。它已成为企业和组织简化签名流程的重要工具，只需在世界任何地方单击几下即可签署文档。在本文中，我们将探讨如何使用 HTML5、JavaScript 和 Dynamsoft Document Viewer 将签名插入 PDF 文档。

演示视频：使用电子签名签署 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 PDF编辑器的签名功能

我们的 Web 文档注释项目是使用 Dynamsoft Document Viewer 构建的，具有高度可扩展性。目前它包括 PDF 文档的条形码检测。在以下部分中，我们将逐步指导您完成向 PDF 文档添加电子签名的过程。

第 1 步：获取源代码

从 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 中打开项目。

第 2 步：添加签名按钮

在main.css中，为签名按钮添加材质图标：

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

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

登录后复制

How to Insert Signatures into PDF Documents with HTMLnd JavaScript

定义签名按钮并将其添加到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() {
    ...
}
```
登录后复制
登录后复制

步骤 3：创建用于签名输入的弹出对话框

签名输入的弹出对话框包含以下元素：

用于绘制签名的画布元素。
用于更改签名颜色的颜色选项。
用于调整签名粗细的笔画滑块。
用于定位签名的 X 和 Y 坐标。
用于将签名插入 PDF 文档的保存按钮。
用于关闭对话框的取消按钮。
用于擦除签名的重画按钮。

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

登录后复制

步骤 4：将签名插入文档

要将签名插入 PDF 文档：

将画布转换为斑点：

<div>



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

登录后复制

获取当前页面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();
});

登录后复制

How to Insert Signatures into PDF Documents with HTMLnd JavaScript

源代码

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

以上是如何使用 HTMLnd JavaScript 将签名插入 PDF 文档的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7790

Java教程

1644

CakePHP 教程

1401

Laravel 教程

1298

PHP教程

1234

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。