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

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

1. Clonez le code source du référentiel GitHub :
   

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

2. Accédez au répertoire document_annotation :
   

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

3. Ouvrez le projet dans Visual Studio Code.

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

1. 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;
   }
   
   

   

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

3. Ajoutez le gestionnaire d'événements de clic pour le bouton de détection de document :
   

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

É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

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

1. 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
   

2. Normaliser l'image du document :
   

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

   

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!