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

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

オンラインデモ

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

前提條件

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

• Dynamsoft Document Viewer: この JavaScript SDK により、PDF、JPEG、PNG、 のシームレスな表示が可能になります。 TIFF および BMPファイル。 PDF 注釈のレンダリングと保存機(jī)能も備えています。ここからダウンロードします: https://www.npmjs.com/package/dynamsoft-document-viewer.

• Dynamsoft Capture Vision Bundle: この JavaScript SDK は、ドキュメント検出、トリミング、および畫(huà)像拡張機(jī)能を提供します。ここからダウンロードします: https://www.npmjs.com/package/dynamsoft-capture-vision-bundle.

HTML5 および JavaScript でのドキュメントの検出および修正機(jī)能の実裝

以下のセクションでは、HTML5 と JavaScript を使用したドキュメントの検出と修正機(jī)能の実裝について説明します。ソース コードを既にダウンロードしている場(chǎng)合は、ステップ 2 に進(jìn)んでください。

ステップ 1: ソース コードを取得する

1. GitHub リポジトリからソース コードのクローンを作成します:
   

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

2. document_annotation ディレクトリに移動(dòng)します:
   

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

3. Visual Studio Code でプロジェクトを開(kāi)きます。

ステップ 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 隅の點(diǎn)に基づいて輪郭を描畫(huà)します。
   

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

2. ドキュメント畫(huà)像を正規(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 に保存する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。