電子簽名是手寫簽名的數(shù)字形式，允許個(gè)人以電子方式簽署文檔。它已成為企業(yè)和組織簡化簽名流程的重要工具，只需在世界任何地方單擊幾下即可簽署文檔。在本文中，我們將探討如何使用 HTML5、JavaScript 和 Dynamsoft Document Viewer 將簽名插入 PDF 文檔。

演示視頻：使用電子簽名簽署 PDF 文檔

在線演示

https://yushulx.me/web-document-annotation/

先決條件

• Dynamsoft Capture Vision 試用許可證：獲取 30 天免費(fèi)試用許可證以解鎖 Dynamsoft 產(chǎn)品的全部功能。

• Dynamsoft 文檔查看器：此 JavaScript SDK 可無縫查看 PDF、JPEG、PNG、 TIFF 和 BMP 文件。它還具有 PDF 注釋渲染和保存功能。下載鏈接：https://www.npmjs.com/package/dynamsoft-document-viewer。

實(shí)現(xiàn)Web PDF編輯器的簽名功能

我們的 Web 文檔注釋項(xiàng)目是使用 Dynamsoft Document Viewer 構(gòu)建的，具有高度可擴(kuò)展性。目前它包括 PDF 文檔的條形碼檢測(cè)。在以下部分中，我們將逐步指導(dǎo)您完成向 PDF 文檔添加電子簽名的過程。

第 1 步：獲取源代碼

1. 從 GitHub 存儲(chǔ)庫克隆源代碼：
   

   git clone https://github.com/yushulx/web-twain-document-scan-management.git
   

2. 導(dǎo)航到 document_annotation 目錄：
   

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

3. 在 Visual Studio Code 中打開項(xiàng)目。

第 2 步：添加簽名按鈕

1. 在main.css中，為簽名按鈕添加材質(zhì)圖標(biāo)：
   

   .icon-stylus::before {
       content: "edit";
   }
   
   .icon-stylus {
       display: flex;
       font-size: 1.5em;
   }
   
   

   

2. 定義簽名按鈕并將其添加到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,
       ],
   };
   

3. 添加簽名按鈕的點(diǎn)擊事件處理程序：
   

   editViewer.on("sign", sign);
   
   function sign() {
       ...
   }
   

步驟 3：創(chuàng)建用于簽名輸入的彈出對(duì)話框

簽名輸入的彈出對(duì)話框包含以下元素：

• 用于繪制簽名的畫布元素。
• 用于更改簽名顏色的顏色選項(xiàng)。
• 用于調(diào)整簽名粗細(xì)的筆畫滑塊。
• 用于定位簽名的 X 和 Y 坐標(biāo)。
• 用于將簽名插入 PDF 文檔的保存按鈕。
• 用于關(guān)閉對(duì)話框的取消按鈕。
• 用于擦除簽名的重畫按鈕。

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

editViewer.on("sign", sign);

function sign() {
    ...
}

步驟 4：將簽名插入文檔

要將簽名插入 PDF 文檔：

1. 將畫布轉(zhuǎn)換為斑點(diǎn)：
   

   <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;
   

2. 獲取當(dāng)前頁面ID和頁面數(shù)據(jù)：
   

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

3. 使用簽名圖像創(chuàng)建新的圖章注釋：
   

   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 文檔的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！