領(lǐng)収書、請求書、契約書などの文書を PDF ファイルとして取り込んで保存することは、多くの企業(yè)にとって共通の要件です。この記事では、Dynamsoft Document Viewer で構(gòu)築された Web ドキュメント エディタ プロジェクトを強化し、ドキュメントを検出して PDF として保存する機能を追加します。ドキュメント検出機能は Dynamsoft Capture Vision を利用しています。

デモビデオ: ドキュメントを検出して PDF に保存

オンラインデモ

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

前提條件

• Dynamsoft Capture Vision 試用ライセンス: 30 日間の無料試用ライセンスを取得して、Dynamsoft 製品の全機能を利用可能にします。

• Dynamsoft Document Viewer: この 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 でプロジェクトを開きます。

ステップ 2: ドキュメント検出ボタンを追加する

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: ドキュメントの検出と正規(guī)化のためのポップアップ ダイアログを作成する

ドキュメントの検出と正規(guī)化のポップアップ ダイアログには、検出、正規(guī)化、および キャンセルの 3 つのボタンが含まれています。

• 検出: ドキュメントの境界を検出します。
• 正規(guī)化: ドキュメントを正規(guī)化します。
• キャンセル: ダイアログを閉じます。

HTML コード

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

ステップ 4: ドキュメントのコーナーポイントを編集し、ドキュメントを修正する

1. 編集ビューアでドキュメントを検出し、4 隅の點に基づいて輪郭を描畫します。
   

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

2. ドキュメント畫像を正規(guī)化します:
   

   .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 に保存する方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。