電子簽名是手寫簽名的數位形式，允許個人以電子方式簽署文件。它已成為企業和組織簡化簽名流程的重要工具，只需在世界任何地方單擊幾下即可簽署文件。在本文中，我們將探討如何使用 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中文網其他相關文章！
