如何使用 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 儲存庫複製原始碼：
   

2. 導覽至 document_annotation 目錄：
   

3. 在 Visual Studio Code 中開啟專案。

Step2：新增文檔偵測按鈕

1. 在main.css中，為文件偵測按鈕新增材質圖示：
   

   

2. 定義文件偵測按鈕並將其新增至main.js中的工具列：
   

3. 新增文件偵測按鈕的點擊事件處理程序：
   

步驟 3：建立用於文件偵測和標準化的彈出對話框

文件偵測和標準化的彈出對話框包括三個按鈕：偵測、標準化和取消。

• 偵測：偵測文件邊界。
• 標準化：標準化文件。
• 取消：關閉對話框。

HTML 代碼

步驟 4：編輯文檔角落並修正文檔

1. 偵測文件並根據編輯檢視器中的四個角落繪製輪廓：
   

2. 標準化文件影像：
   

   

原始碼

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

以上是如何使用 HTMLnd JavaScript 檢測文件並將其儲存為 PDF的詳細內容。更多資訊請關注PHP中文網其他相關文章！