How to Detect and Save Documents to PDF with HTML5 and JavaScript

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

<div id="document-detection" class="overlay">
        <div class="document-container">
            <h2>Document Detection</h2>

            <div class="form-group">
                <button id="detectDocument">Detect</button>
                <button id="normalizeDocument">Normalize</button> 
                <button id="cancelDocument">Cancel</button>
            </div>
        </div>
    </div>

JavaScript code

let detectDocumentButton = document.getElementById("detectDocument");
let cancelDocumentButton = document.getElementById("cancelDocument");
let normalizeDocumentButton = document.getElementById("normalizeDocument");

cancelDocumentButton.addEventListener('click', () => {
    document.getElementById("document-detection").style.display = "none";
});

normalizeDocumentButton.addEventListener('click', async () => {
    document.getElementById("document-detection").style.display = "none";

    ...
});

detectDocumentButton.addEventListener('click', async () => {
    document.getElementById("document-detection").style.display = "none";

    ...
});

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:
   

   detectDocumentButton.addEventListener('click', async () => {
       document.getElementById("document-detection").style.display = "none";
   
       const settings = {
           quality: 100,
           saveAnnotation: false,
       };
   
       const image = await editViewer.currentDocument.saveToJpeg(editViewer.getCurrentPageIndex(), settings);
       const result = await cvRouter.capture(image, "DetectDocumentBoundaries_Default");
   
       for (let item of result.items) {
           if (item.type !== Dynamsoft.Core.EnumCapturedResultItemType.CRIT_DETECTED_QUAD) {
               continue;
           }
   
           let points = item.location.points;
   
           let currentPageId = currentDoc.pages[editViewer.getCurrentPageIndex()];
           let pageData = await currentDoc.getPageData(currentPageId);
   
           documentPoints = points;
   
           const polygonOptions = {
               points: points.map(p => {
                   return {
                       x: p.x / pageData.display.width * pageData.mediaBox.width,
                       y: p.y / pageData.display.height * pageData.mediaBox.height
                   }
               }),
               borderColor: "rgb(0,0,255)",
               flags: {
                   print: false,
                   noView: false,
                   readOnly: false,
   
               }
           }
   
           let polygon = Dynamsoft.DDV.annotationManager.createAnnotation(currentPageId, "polygon", polygonOptions);
           polygon['name'] = 'document';
   
           break;
       }
   });
   

2. Normalize the document image:
   

   normalizeDocumentButton.addEventListener('click', async () => {
       document.getElementById("document-detection").style.display = "none";
   
       let currentPageId = currentDoc.pages[editViewer.getCurrentPageIndex()];
       let blob = await normalizeImage();
   
       if (blob) {
           await currentDoc.updatePage(currentPageId, blob);
           documentPoints = null;
       }
   });
   
   async function normalizeImage() {
   
       if (!documentPoints) {
           return null;
       }
   
       let params = await cvRouter.getSimplifiedSettings("NormalizeDocument_Default");
       params.roi.points = documentPoints;
       params.roiMeasuredInPercentage = 0;
       await cvRouter.updateSettings("NormalizeDocument_Default", params);
   
       const settings = {
           quality: 100,
           saveAnnotation: false,
       };
   
       const image = await editViewer.currentDocument.saveToJpeg(editViewer.getCurrentPageIndex(), settings);
       cvRouter.maxCvsSideLength = 9999;
       const result = await cvRouter.capture(image, "NormalizeDocument_Default"); 
   
       for (let item of result.items) {
           if (item.type !== Dynamsoft.Core.EnumCapturedResultItemType.CRIT_NORMALIZED_IMAGE) {
               continue;
           }
   
           let blob = await item.toBlob();
           return blob;
       }
   }
   

   

Source Code

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