Comment détecter et enregistrer des documents au format PDF avec HTMLnd JavaScript-js tutoriel-php.cn

Comment détecter et enregistrer des documents au format PDF avec HTMLnd JavaScript

Linda Hamilton

Libérer： 2024-12-19 11:30:12

original

249 Les gens l'ont consulté

La capture et l'enregistrement de documents, tels que des reçus, des factures et des contrats, sous forme de fichiers PDF, sont une exigence courante pour de nombreuses entreprises. Dans cet article, nous améliorons notre projet d'éditeur de documents Web construit avec Dynamsoft Document Viewer en ajoutant la possibilité de détecter et d'enregistrer des documents au format PDF. La fonctionnalité de détection de documents est optimisée par Dynamsoft Capture Vision.

Vidéo de démonstration : Détecter et enregistrer des documents au format PDF

Démo en ligne

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

Conditions préalables

Licence d'essai Dynasoft Capture Vision : obtenez une licence d'essai gratuite de 30 jours pour débloquer toutes les capacités des produits Dynamsoft.
Dynamsoft Document Viewer : ce SDK JavaScript permet une visualisation transparente des formats PDF, JPEG, PNG, Fichiers TIFF et BMP. Il propose également le rendu et l'enregistrement des annotations PDF. Téléchargez-le ici : https://www.npmjs.com/package/dynamsoft-document-viewer.
Dynamsoft Capture Vision Bundle : ce SDK JavaScript fournit des fonctionnalités de détection de documents, de recadrage et d'amélioration d'image. Téléchargez-le ici : https://www.npmjs.com/package/dynamsoft-capture-vision-bundle.

Implémentation de fonctionnalités de détection et de rectification de documents en HTML5 et JavaScript

Les sections suivantes vous guident dans la mise en œuvre des fonctionnalités de détection et de rectification de documents à l'aide de HTML5 et JavaScript. Si vous avez déjà téléchargé le code source, vous pouvez passer à l'étape 2.

Étape 1 : Obtenez le code source

Clonez le code source du référentiel GitHub :
```
git clone https://github.com/yushulx/web-twain-document-scan-management.git
```
Copier après la connexion
Copier après la connexion
Accédez au répertoire document_annotation :
```
cd web-twain-document-scan-management/examples/document_annotation
```
Copier après la connexion
Copier après la connexion
Ouvrez le projet dans Visual Studio Code.

Étape 2 : ajouter un bouton de détection de document

Dans main.css, ajoutez une icône matérielle pour le bouton de détection de document :
```
.icon-document_scanner::before {
    content: "crop_free";
}

.icon-document_scanner {
    display: flex;
    font-size: 1.5em;
}
```
Copier après la connexion
Copier après la connexion

Définissez le bouton de détection de document et ajoutez-le à la barre d'outils dans main.js :

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

Copier après la connexion

Ajoutez le gestionnaire d'événements de clic pour le bouton de détection de document :
```
editViewer.on("detectDocument", detectDocument);

async function detectDocument() {
    ...
}
```
Copier après la connexion

Étape 3 : Créer une boîte de dialogue contextuelle pour la détection et la normalisation des documents

La boîte de dialogue contextuelle pour la détection et la normalisation des documents comprend trois boutons : Détecter, Normaliser et Annuler.

Détecter : Détecter la limite du document.
Normaliser : Normaliser le document.
Annuler : Fermez la boîte de dialogue.

Code HTML

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

Copier après la connexion

Étape 4 : Modifier les points d'angle du document et rectifier le document

Détectez le document et dessinez les contours en fonction des quatre points d'angle dans la visionneuse d'édition :
```
cd web-twain-document-scan-management/examples/document_annotation
```
Copier après la connexion
Copier après la connexion

Normaliser l'image du document :

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

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

Copier après la connexion

How to Detect and Save Documents to PDF with HTMLnd JavaScript

Code source

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!