So erkennen und speichern Sie Dokumente mit HTML und JavaScript im PDF-Format

Das Erfassen und Speichern von Dokumenten wie Quittungen, Rechnungen und Verträgen als PDF-Dateien ist für viele Unternehmen eine häufige Anforderung. In diesem Artikel erweitern wir unser Webdokument-Editor-Projekt, das mit Dynamsoft Document Viewer erstellt wurde, indem wir die Möglichkeit hinzufügen, Dokumente als PDFs zu erkennen und zu speichern. Die Dokumenterkennungsfunktion wird von Dynamsoft Capture Vision unterstützt.

Demo-Video: Dokumente erkennen und als PDF speichern

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. Laden Sie es hier herunter: https://www.npmjs.com/package/dynamsoft-document-viewer.

• Dynamsoft Capture Vision Bundle: Dieses JavaScript SDK bietet Funktionen zur Dokumenterkennung, zum Zuschneiden und zur Bildverbesserung. Laden Sie es hier herunter: https://www.npmjs.com/package/dynamsoft-capture-vision-bundle.

Implementierung von Dokumentenerkennungs- und -berichtigungsfunktionen in HTML5 und JavaScript

Die folgenden Abschnitte führen Sie durch die Implementierung von Dokumentenerkennungs- und Berichtigungsfunktionen mithilfe von HTML5 und JavaScript. Wenn Sie den Quellcode bereits heruntergeladen haben, können Sie mit Schritt 2 fortfahren.

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 Dokumenterkennungsschaltfläche hinzu

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

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

   

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

   const documentButton = {
       type: Dynamsoft.DDV.Elements.Button,
       className: "material-icons icon-document_scanner",
       tooltip: "Detect document",
       events: {
           click: "detectDocument",
       }
   }
   
   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,
                           documentButton,
                       ],
                   },
                   {
                       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 Dokumenterkennungsschaltfläche hinzu:
   

   editViewer.on("detectDocument", detectDocument);
   
   async function detectDocument() {
       ...
   }
   

Schritt 3: Erstellen Sie ein Popup-Dialogfeld zur Dokumentenerkennung und -normalisierung

Das Popup-Dialogfeld zur Dokumentenerkennung und -normalisierung enthält drei Schaltflächen: Erkennen, Normalisieren und Abbrechen.

• Erkennen: Erkennen Sie die Dokumentgrenze.
• Normalisieren: Normalisieren Sie das Dokument.
• Abbrechen: Schließen Sie den Dialog.

HTML-Code

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

Schritt 4: Bearbeiten Sie die Eckpunkte des Dokuments und korrigieren Sie das Dokument

1. Erkennen Sie das Dokument und zeichnen Sie die Konturen basierend auf den vier Eckpunkten im Bearbeitungsviewer:
   

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

2. Dokumentbild normalisieren:
   

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

   

Quellcode

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

Das obige ist der detaillierte Inhalt vonSo erkennen und speichern Sie Dokumente mit HTML und JavaScript im PDF-Format. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!