將收據(jù)、發(fā)票和合同等文檔捕獲并保存為 PDF 文件是許多企業(yè)的常見要求。在本文中，我們通過添加檢測文檔并將其另存為 PDF 的功能來增強(qiáng)使用 Dynamsoft Document Viewer 構(gòu)建的 Web 文檔編輯器項(xiàng)目。文檔檢測功能由 Dynamsoft Capture Vision 提供支持。

演示視頻：檢測文檔并將其保存為 PDF

在線演示

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

先決條件

• Dynamsoft Capture Vision 試用許可證：獲取 30 天免費(fèi)試用許可證以解鎖 Dynamsoft 產(chǎn)品的全部功能。

• Dynamsoft 文檔查看器：此 JavaScript SDK 可無縫查看 PDF、JPEG、PNG、 TIFF 和 BMP 文件。它還具有 PDF 注釋渲染和保存功能。在這里下載：https://www.npmjs.com/package/dynamsoft-document-viewer。

• Dynamsoft Capture Vision Bundle：此 JavaScript SDK 提供文檔檢測、裁剪和圖像增強(qiáng)功能。在這里下載：https://www.npmjs.com/package/dynamsoft-capture-vision-bundle。

在 HTML5 和 JavaScript 中實(shí)現(xiàn)文檔檢測和糾正功能

以下部分將指導(dǎo)您使用 HTML5 和 JavaScript 實(shí)現(xiàn)文檔檢測和糾正功能。如果您已經(jīng)下載了源代碼，可以跳至步驟2。

第 1 步：獲取源代碼

1. 從 GitHub 存儲(chǔ)庫克隆源代碼：
   

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

2. 導(dǎo)航到 document_annotation 目錄：
   

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

3. 在 Visual Studio Code 中打開項(xiàng)目。

Step2：添加文檔檢測按鈕

1. 在main.css中，為文檔檢測按鈕添加材質(zhì)圖標(biāo)：
   

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

   

2. 定義文檔檢測按鈕并將其添加到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. 添加文檔檢測按鈕的點(diǎn)擊事件處理程序：
   

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

第 3 步：創(chuàng)建用于文檔檢測和標(biāo)準(zhǔn)化的彈出對話框

文檔檢測和標(biāo)準(zhǔn)化的彈出對話框包括三個(gè)按鈕：檢測、標(biāo)準(zhǔn)化和取消。

• 檢測：檢測文檔邊界。
• 標(biāo)準(zhǔn)化：標(biāo)準(zhǔn)化文檔。
• 取消：關(guān)閉對話框。

HTML 代碼

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

步驟 4：編輯文檔角點(diǎn)并修正文檔

1. 檢測文檔并根據(jù)編輯查看器中的四個(gè)角點(diǎn)繪制輪廓：
   

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

2. 標(biāo)準(zhǔn)化文檔圖像：
   

   .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

以上是如何使用 HTMLnd JavaScript 檢測文檔并將其保存為 PDF的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！