So erkennen und speichern Sie Dokumente mit HTML und JavaScript im PDF-Format-js-Tutorial-php.cn

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

Linda Hamilton

Freigeben： 2024-12-19 11:30:12

Original

244 Leute haben es durchsucht

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

Klonen Sie den Quellcode aus dem GitHub-Repository:
```
git clone https://github.com/yushulx/web-twain-document-scan-management.git
```
Nach dem Login kopieren
Nach dem Login kopieren
Navigieren Sie zum Verzeichnis document_annotation:
```
cd web-twain-document-scan-management/examples/document_annotation
```
Nach dem Login kopieren
Nach dem Login kopieren
Öffnen Sie das Projekt in Visual Studio Code.

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

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;
}
```
Nach dem Login kopieren
Nach dem Login kopieren

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

Nach dem Login kopieren

Fügen Sie den Click-Event-Handler für die Dokumenterkennungsschaltfläche hinzu:
```
editViewer.on("detectDocument", detectDocument);

async function detectDocument() {
    ...
}
```
Nach dem Login kopieren

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

Nach dem Login kopieren

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

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
```
Nach dem Login kopieren
Nach dem Login kopieren

Dokumentbild normalisieren:

.icon-document_scanner::before {
    content: "crop_free";
}

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

Nach dem Login kopieren

How to Detect and Save Documents to PDF with HTMLnd JavaScript

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!