PWA ドキュメント スキャナーの構築方法: PDF としてキャプチャ、編集、アップロードする

多くの業界では、請求書や領収書などのドキュメントをキャプチャ、編集し、クラウドにアップロードするためにドキュメント スキャナ アプリが不可欠です。 Dynamsoft Document Viewer SDK を活用すると、プログレッシブ Web アプリ (PWA) ドキュメント スキャナーを構築できます。これにより、ユーザーは画像をキャプチャし、トリミングし、複数のページを 1 つのドキュメントに結合し、スキャンしたドキュメントを PDF 形式に変換して、簡単に共有したり保存したりできます。このチュートリアルでは、Dynamsoft Document Viewer SDK を使用して PWA ドキュメント スキャナーを作成するプロセスを説明します。

PWA ドキュメント スキャナーのデモ ビデオ

前提条件

• Dynamsoft Document Viewer: このパッケージは、PDF や JPEG、PNG、TIFF、および BMP。主な機能には、PDF レンダリング、ページ ナビゲーション、画質向上、ドキュメント保存機能などがあります。 SDK は npm で見つけることができます。

• Dynamsoft Capture Vision トライアル ライセンス: Dynamsoft SDK のすべての機能へのアクセスを提供する 30 日間の無料トライアル ライセンス。

PDF ファイルをアップロードするための Web サーバーの作成

Base64 文字列を受信し、それを PDF ファイルとしてローカル ディスクに保存するための

Node.js/Express サーバー を作成しましょう。

依存関係のインストール

1. サーバー用のフォルダーを作成します:

   
   

   mkdir server
   cd server
   

2. Node.js プロジェクトを初期化します:

   
   

   npm init -y
   

3. Express と cors をインストールします:
   

   npm install express cors
   

   説明

   • Express は、Web サーバーの作成を簡素化します。
   • CORS (Cross-Origin Resource Sharing) は、クロスオリジンリクエストを許可するミドルウェアです。

サーバーコード(index.js)の作成

1. 次のコードを使用して、index.js ファイルを作成します。

   
   

   const express = require('express');
   const cors = require('cors');
   const fs = require('fs');
   const path = require('path');
   
   const app = express();
   const PORT = 3000;
   
   app.use(cors());
   app.use(express.json({ limit: '10mb' }));
   
   app.post('/upload', (req, res) => {
       const { image } = req.body;
   
       if (!image) {
           return res.status(400).json({ error: 'No image provided.' });
       }
   
       const buffer = Buffer.from(image, 'base64');
   
       // Save the image to disk
       const filename = `image_${Date.now()}.pdf`;
       const filepath = path.join(__dirname, 'uploads', filename);
   
       // Ensure the uploads directory exists
       if (!fs.existsSync('uploads')) {
           fs.mkdirSync('uploads');
       }
   
       fs.writeFile(filepath, buffer, (err) => {
           if (err) {
               console.error('Failed to save image:', err);
               return res.status(500).json({ error: 'Failed to save image.' });
           }
   
           console.log('Image saved:', filename);
           res.json({ message: 'Image uploaded successfully!', filename });
       });
   });
   
   // Start the server
   app.listen(PORT, () => {
       console.log(`Server is running on http://localhost:${PORT}`);
   });
   

2. Web サーバーを実行します:

   
   

   node index.js
   

Dynamsoft Document Viewer を使用した PWA ドキュメント スキャナーの実装

Dynamsoft Document Viewer の使用を開始するには、GitHub リポジトリから公式サンプル コードをダウンロードします: https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/complete-document-capturing-ワークフロー。このサンプルでは、​​Dynamsoft Document Viewer SDK を使用して、複数の画像をキャプチャ、切り抜き、結合して 1 つのドキュメントを作成する方法を示します。

プロジェクトに基づいて、次の機能を追加します:

• PWA のサポート。
• スキャンしたドキュメントを PDF ファイルとしてサーバーにアップロードします。

Web プロジェクトを PWA 互換にする

1. PWA プロジェクト用のフォルダーを作成します:
   

   mkdir server
   cd server
   

2. サンプル コードをクライアント フォルダーにコピーします。

3. プロジェクトのルート ディレクトリに、次の内容を含むmanifest.json ファイルを作成します。
   

   npm init -y
   

4. 次の内容を含む sw.js ファイルをプロジェクトのルート ディレクトリに作成します。
   

   npm install express cors
   

5. index.html ファイルに Service Worker を登録します:
   

   const express = require('express');
   const cors = require('cors');
   const fs = require('fs');
   const path = require('path');
   
   const app = express();
   const PORT = 3000;
   
   app.use(cors());
   app.use(express.json({ limit: '10mb' }));
   
   app.post('/upload', (req, res) => {
       const { image } = req.body;
   
       if (!image) {
           return res.status(400).json({ error: 'No image provided.' });
       }
   
       const buffer = Buffer.from(image, 'base64');
   
       // Save the image to disk
       const filename = `image_${Date.now()}.pdf`;
       const filepath = path.join(__dirname, 'uploads', filename);
   
       // Ensure the uploads directory exists
       if (!fs.existsSync('uploads')) {
           fs.mkdirSync('uploads');
       }
   
       fs.writeFile(filepath, buffer, (err) => {
           if (err) {
               console.error('Failed to save image:', err);
               return res.status(500).json({ error: 'Failed to save image.' });
           }
   
           console.log('Image saved:', filename);
           res.json({ message: 'Image uploaded successfully!', filename });
       });
   });
   
   // Start the server
   app.listen(PORT, () => {
       console.log(`Server is running on http://localhost:${PORT}`);
   });
   

スキャンした文書をPDFファイルとしてアップロードする

1. uiConfig.js で、save という名前のクリック イベントを含むカスタマイズされたダウンロード ボタンを追加します。
   

   node index.js
   

2. index.html で、save イベントを実装します。ドキュメントを PDF として保存した後、BLOB を Base64 文字列に変換し、サーバーにアップロードします。
   

   mkdir client
   cd client
   

PWA ドキュメント スキャナーの実行

1. プロジェクトのルート ディレクトリで Web サーバーを起動します:
   

   {
       "short_name": "MyPWA",
       "name": "My Progressive Web App",
       "icons": [
           {
               "src": "icon.png",
               "sizes": "192x192",
               "type": "image/png"
           }
       ],
       "start_url": "/",
       "display": "standalone",
       "background_color": "#ffffff",
       "theme_color": "#000000"
   }
   

2. Web ブラウザで http://localhost:8000 にアクセスします。

   

ソースコード

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

以上がPWA ドキュメント スキャナーの構築方法: PDF としてキャプチャ、編集、アップロードするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。