Home >Web Front-end >JS Tutorial >How to Detect and Save Documents to PDF with HTMLnd 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.
https://yushulx.me/web-document-annotation/
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.
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.
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.
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() { ... }
The pop-up dialog for document detection and normalization includes three buttons: Detect, Normalize, and Cancel.
HTML Code
git clone https://github.com/yushulx/web-twain-document-scan-management.git
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
Normalize the document image:
.icon-document_scanner::before { content: "crop_free"; } .icon-document_scanner { display: flex; font-size: 1.5em; }
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!