HTMLnd JavaScript を使用してドキュメントを検出して PDF に保存する方法

領収書、請求書、契約書などの文書を PDF ファイルとして取り込んで保存することは、多くの企業にとって共通の要件です。この記事では、Dynamsoft Document Viewer で構築された 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: ドキュメントの検出と正規化のためのポップアップ ダイアログを作成する

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

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

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. ドキュメント画像を正規化します:
   

   .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 中国語 Web サイトの他の関連記事を参照してください。