在许多行业中，文档扫描仪应用程序对于捕获、编辑文档以及将发票和收据上传到云端至关重要。通过利用 Dynamsoft Document Viewer SDK，您可以构建 渐进式 Web 应用程序 (PWA) 文档扫描仪，使用户能够捕获图像、裁剪图像、将多个页面合并到单个文档中，并将扫描的文档转换为PDF格式，以便于共享和存储。本教程将指导您完成使用 Dynamsoft Document Viewer SDK 创建 PWA 文档扫描仪的过程。
Dynamsoft Document Viewer：此软件包提供 JavaScript API，用于查看和注释各种文档格式，包括 PDF 和图像，例如 JPEG、PNG、TIFF 和 BMP。主要功能包括 PDF 渲染、页面导航、图像质量增强和文档保存功能。您可以在 npm 上找到 SDK。
Dynamsoft Capture Vision 试用许可证：30 天免费试用许可证，可以访问 Dynamsoft SDK 的所有功能。
让我们创建一个 Node.js/Express 服务器来接收 Base64 字符串并将其作为 PDF 文件保存到本地磁盘。
为您的服务器创建一个文件夹：
mkdir server cd server
初始化 Node.js 项目：
npm init -y
安装Express和cors：
npm install express cors
说明
使用以下代码创建一个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}`);
});
运行网络服务器：
node index.js
要开始使用 Dynamsoft 文档查看器，请从 GitHub 存储库下载官方示例代码：https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/complete-document-capturing-工作流程。此示例演示了如何使用 Dynamsoft Document Viewer SDK 捕获、裁剪多个图像并将其合并到单个文档中。
基于该项目，我们将添加以下功能：
为您的 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}`);
});
在 uiConfig.js 中，添加一个自定义下载按钮，其中包含名为 save 的单击事件：
node index.js
在index.html中，实现save事件。将文档保存为 PDF 后，将 blob 转换为 Base64 字符串并将其上传到服务器：
mkdir client cd client
在项目的根目录中启动一个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"
}
在网络浏览器中访问 http://localhost:8000。
https://github.com/yushulx/web-twain-document-scan-management/tree/main/examples/pwa
以上是如何构建 PWA 文档扫描仪：捕获、编辑和上传为 PDF的详细内容。更多信息请关注PHP中文网其他相关文章！
