Capturing and saving documents, such as receipts, invoices, and contracts, as PDF files is a common requirement for many businesses. In this article, we enhance our web document editor project built with Dynamsoft Document Viewer by adding the capability to detect and save documents as PDFs. The document detection feature is powered by Dynamsoft Capture Vision.

Demo Video: Detect and Save Documents to PDF

Online Demo

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

Prerequisites

• Dynamsoft Capture Vision Trial License: Obtain a 30-day free trial license to unlock the full capabilities of Dynamsoft Products.

• Dynamsoft Document Viewer: This JavaScript SDK enables seamless viewing of PDF, JPEG, PNG, TIFF, and BMP files. It also features PDF annotation rendering and saving. Download it here: https://www.npmjs.com/package/dynamsoft-document-viewer.

• Dynamsoft Capture Vision Bundle: This JavaScript SDK provides document detection, cropping, and image enhancement functionalities. Download it here: https://www.npmjs.com/package/dynamsoft-capture-vision-bundle.

Implementing Document Detection and Rectification Features in HTML5 and JavaScript

The following sections guide you through implementing document detection and rectification functionalities using HTML5 and JavaScript. If you have already downloaded the source code, you can skip to Step 2.

Step 1: Get the Source Code

1. Clone the source code from the GitHub repository:
   

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

2. Navigate to the document_annotation directory:
   

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

3. Open the project in Visual Studio Code.

Step2: Add a Document Detection Button

1. In main.css, add a material icon for the document detection button:
   

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

   

2. Define the document detection button and add it to the toolbar in 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. Add the click event handler for the document detection button:
   

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

Step 3: Create a Pop-up Dialog for Document Detection and Normalization

The pop-up dialog for document detection and normalization includes three buttons: Detect, Normalize, and Cancel.

• Detect: Detect the document boundary.
• Normalize: Normalize the document.
• Cancel: Close the dialog.

HTML Code

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

Step 4: Edit Document Corner Points and Rectify the Document

1. Detect the document and draw the contours based on the four corner points in the edit viewer:
   

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

2. Normalize the document image:
   

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

   

Source Code

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

The above is the detailed content of How to Detect and Save Documents to PDF with HTMLnd JavaScript. For more information, please follow other related articles on the PHP Chinese website!