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

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

Susan Sarandon

リリース： 2024-10-25 06:34:02

オリジナル

574 人が閲覧しました

多くの業界では、請求書や領収書などのドキュメントをキャプチャ、編集し、クラウドにアップロードするためにドキュメントスキャナアプリが不可欠です。 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 サーバー を作成しましょう。

依存関係のインストール

サーバー用のフォルダーを作成します:
```
mkdir server
cd server
```
ログイン後にコピー
ログイン後にコピー
Node.js プロジェクトを初期化します:
```
npm init -y
```
ログイン後にコピー
ログイン後にコピー
Express と cors をインストールします:
```
npm install express cors
```
ログイン後にコピー
ログイン後にコピー
説明
- Express は、Web サーバーの作成を簡素化します。
- CORS (Cross-Origin Resource Sharing) は、クロスオリジンリクエストを許可するミドルウェアです。

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

次のコードを使用して、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}`);
});

ログイン後にコピー

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 互換にする

PWA プロジェクト用のフォルダーを作成します:
```
mkdir server
cd server
```
ログイン後にコピー
ログイン後にコピー
サンプルコードをクライアントフォルダーにコピーします。
プロジェクトのルートディレクトリに、次の内容を含むmanifest.json ファイルを作成します。
```
npm init -y
```
ログイン後にコピー
ログイン後にコピー
次の内容を含む sw.js ファイルをプロジェクトのルートディレクトリに作成します。
```
npm install express cors
```
ログイン後にコピー
ログイン後にコピー

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ファイルとしてアップロードする

uiConfig.js で、save という名前のクリックイベントを含むカスタマイズされたダウンロードボタンを追加します。
```
node index.js
```
ログイン後にコピー
ログイン後にコピー
index.html で、save イベントを実装します。ドキュメントを PDF として保存した後、BLOB を Base64 文字列に変換し、サーバーにアップロードします。
```
mkdir client
cd client
```
ログイン後にコピー

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

プロジェクトのルートディレクトリで 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"
}

ログイン後にコピー