So fügen Sie mit HTML und JavaScript Signaturen in PDF-Dokumente ein

Eine E-Signatur ist eine digitale Form einer handschriftlichen Unterschrift, die es Einzelpersonen ermöglicht, Dokumente elektronisch zu unterzeichnen. Es ist für Unternehmen und Organisationen zu einem unverzichtbaren Tool zur Rationalisierung des Signaturprozesses geworden und ermöglicht das Signieren von Dokumenten mit nur wenigen Klicks von überall auf der Welt. In diesem Artikel erfahren Sie, wie Sie mithilfe von HTML5, JavaScript und Dynamsoft Document Viewer eine Signatur in PDF-Dokumente einfügen.

Demo-Video: PDF-Dokumente mit elektronischer Signatur signieren

Online-Demo

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

Voraussetzungen

• Dynamsoft Capture Vision-Testlizenz: Erhalten Sie eine 30-tägige kostenlose Testlizenz, um alle Funktionen der Dynamsoft-Produkte freizuschalten.

• Dynamsoft Document Viewer: Dieses JavaScript SDK ermöglicht die nahtlose Anzeige von PDF, JPEG, PNG, TIFF- und BMP-Dateien. Es ermöglicht auch das Rendern und Speichern von PDF-Anmerkungen. Download-Link: https://www.npmjs.com/package/dynamsoft-document-viewer.

Implementierung der Signaturfunktion für den Web-PDF-Editor

Unser Webdokumentanmerkungsprojekt, das mit dem Dynamsoft Document Viewer erstellt wurde, ist hoch erweiterbar. Es umfasst derzeit die Barcode-Erkennung für PDF-Dokumente. In den folgenden Abschnitten führen wir Sie Schritt für Schritt durch den Prozess des Hinzufügens einer elektronischen Signatur zu PDF-Dokumenten.

Schritt 1: Holen Sie sich den Quellcode

1. Klonen Sie den Quellcode aus dem GitHub-Repository:
   

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

2. Navigieren Sie zum Verzeichnis document_annotation:
   

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

3. Öffnen Sie das Projekt in Visual Studio Code.

Schritt 2: Fügen Sie eine Signaturschaltfläche hinzu

1. Fügen Sie in main.css ein Materialsymbol für die Signaturschaltfläche hinzu:
   

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

   

2. Definieren Sie die Signaturschaltfläche und fügen Sie sie zur Symbolleiste in main.js hinzu:
   

   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. Fügen Sie den Click-Event-Handler für die Signaturschaltfläche hinzu:
   

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

Schritt 3: Erstellen Sie ein Popup-Dialogfeld für die Signatureingabe

Der Popup-Dialog zur Signatureingabe enthält die folgenden Elemente:

• Ein Canvas-Element zum Zeichnen der Signatur.
• Farboptionen zum Ändern der Signaturfarbe.
• Ein Strichregler zum Anpassen der Signaturdicke.
• X- und Y-Koordinaten zur Positionierung der Signatur.
• Eine Schaltfläche zum Speichern, um die Signatur in das PDF-Dokument einzufügen.
• Eine Schaltfläche zum Abbrechen, um den Dialog zu schließen.
• Eine Schaltfläche zum Neuzeichnen, um die Signatur zu löschen.

HTML-Code

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

Ereignis-Listener für Mausereignisse hinzufügen:

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

Ereignis-Listener für Farb- und Strichoptionen hinzufügen:

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

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

Implementieren Sie die Zeichenfunktionen:

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

Alle Pfade werden im DrawingHistory-Array gespeichert. Die redrawCanvas-Funktion durchläuft das Array und zeichnet die Pfade auf der Leinwand neu.

Ereignis-Listener für die Schaltflächen „OK“, „Neu zeichnen“ und „Abbrechen“ hinzufügen:

editViewer.on("sign", sign);

function sign() {
    ...
}

Schritt 4: Signaturen in Dokumente einfügen

So fügen Sie die Signatur in das PDF-Dokument ein:

1. Konvertieren Sie die Leinwand in einen Blob:
   

   <div>
   
   
   
   <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173421499729336.jpg?x-oss-process=image/resize,p_40" 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. Rufen Sie die aktuelle Seiten-ID und die Seitendaten ab:
   

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

3. Erstellen Sie neue Stempelanmerkungen mit dem Signaturbild:
   

   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();
   });
   

   

Quellcode

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