dev-resources.site

for different kinds of informations.

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

Published at

12/16/2024

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

Clone the source code from the GitHub repository:

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

Navigate to the document_annotation directory:

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

Open the project in Visual Studio Code.

Step2: Add a Document Detection Button

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

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

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

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;
    }
});

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