많은 산업 분야에서 송장 및 영수증과 같은 문서를 캡처, 편집하고 클라우드에 업로드하려면 문서 스캐너 앱이 필수적입니다. Dynamsoft Document Viewer SDK를 활용하면 사용자가 이미지를 캡처하고, 자르고, 여러 페이지를 단일 문서로 결합할 수 있는 프로그레시브 웹 앱(PWA) 문서 스캐너를 구축할 수 있습니다. 스캔한 문서를 PDF 형식으로 변환하여 쉽게 공유하고 저장할 수 있습니다. 이 튜토리얼은 Dynamsoft Document Viewer SDK를 사용하여 PWA 문서 스캐너를 만드는 과정을 안내합니다.
Dynamsoft Document Viewer: 이 패키지는 JPEG, PNG, TIFF, BMP. 주요 기능에는 PDF 렌더링, 페이지 탐색, 이미지 품질 향상 및 문서 저장 기능이 포함됩니다. npm에서 SDK를 찾을 수 있습니다.
Dynamsoft Capture Vision 평가판 라이센스: Dynamsoft SDK의 모든 기능에 대한 액세스를 제공하는 30일 무료 평가판 라이센스
Node.js/Express 서버를 만들어 보겠습니다.
종속성 설치
mkdir server cd server
npm init -y
Express 및 cors 설치:
npm install express cors
설명
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
프로젝트를 기반으로 다음 기능을 추가합니다.
PWA 프로젝트용 폴더 만들기:
mkdir server cd server
샘플 코드를 클라이언트 폴더에 복사하세요.
다음 콘텐츠를 사용하여 프로젝트의 루트 디렉터리에 매니페스트.json 파일을 만듭니다.
npm init -y
다음 콘텐츠로 프로젝트의 루트 디렉터리에 sw.js 파일을 만듭니다.
npm install express cors
index.html 파일에 서비스 워커를 등록하세요.
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
프로젝트의 루트 디렉터리에서 웹 서버를 시작합니다.
{
"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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
