如何使用 HTMLnd JavaScript 检测文档并将其保存为 PDF

将收据、发票和合同等文档捕获并保存为 PDF 文件是许多企业的常见要求。在本文中，我们通过添加检测文档并将其另存为 PDF 的功能来增强使用 Dynamsoft Document Viewer 构建的 Web 文档编辑器项目。文档检测功能由 Dynamsoft Capture Vision 提供支持。

演示视频：检测文档并将其保存为 PDF

在线演示

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

先决条件

• Dynamsoft Capture Vision 试用许可证：获取 30 天免费试用许可证以解锁 Dynamsoft 产品的全部功能。

• Dynamsoft 文档查看器：此 JavaScript SDK 可无缝查看 PDF、JPEG、PNG、 TIFF 和 BMP 文件。它还具有 PDF 注释渲染和保存功能。在这里下载：https://www.npmjs.com/package/dynamsoft-document-viewer。

• Dynamsoft Capture Vision Bundle：此 JavaScript SDK 提供文档检测、裁剪和图像增强功能。在这里下载：https://www.npmjs.com/package/dynamsoft-capture-vision-bundle。

在 HTML5 和 JavaScript 中实现文档检测和纠正功能

以下部分将指导您使用 HTML5 和 JavaScript 实现文档检测和纠正功能。如果您已经下载了源代码，可以跳至步骤2。

第 1 步：获取源代码

1. 从 GitHub 存储库克隆源代码：
   

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

2. 导航到 document_annotation 目录：
   

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

3. 在 Visual Studio Code 中打开项目。

Step2：添加文档检测按钮

1. 在main.css中，为文档检测按钮添加材质图标：
   

   .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. 添加文档检测按钮的点击事件处理程序：
   

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

第 3 步：创建用于文档检测和标准化的弹出对话框

文档检测和标准化的弹出对话框包括三个按钮：检测、标准化和取消。

• 检测：检测文档边界。
• 标准化：标准化文档。
• 取消：关闭对话框。

HTML 代码

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

步骤 4：编辑文档角点并修正文档

1. 检测文档并根据编辑查看器中的四个角点绘制轮廓：
   

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

2. 标准化文档图像：
   

   .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的详细内容。更多信息请关注PHP中文网其他相关文章！