DocuScan - Professional Document Scanner

A clean, modern document scanner built with pure vanilla JavaScript (no external frameworks). Scan documents using your device camera and save them as high-quality PDF files with A4 format.

Features

• Real-time Camera Preview - Uses device back camera by default
• Professional UI - Clean interface with animated corner markers as framing guide
• Smooth Scan Animation - Realistic up-down scanning effect with flash
• Auto A4 Format PDF - Scanned documents automatically formatted to A4 portrait
• Rescan Functionality - Easily retake without page reload
• Mobile Responsive - Works perfectly on smartphones with anti-zoom protection
• Image Enhancement - Auto contrast adjustment for better document readability
• Toast Notifications - User-friendly feedback for all actions

Tech Stack

Technology	Purpose
HTML5	Structure & camera API
CSS3	Styling, animations, responsive
Vanilla JavaScript	Logic, camera handling, PDF generation
jsPDF	PDF export functionality
Font Awesome 6	Icons (CDN)

Installation & Running Locally

Prerequisites

• Any modern web browser (Chrome, Firefox, Safari, Edge)
• Camera access (back camera recommended)
• Local web server (see options below)
• Git (optional, for cloning repository)

Clone Repository (Optional)

# Clone using HTTPS
git clone https://github.com/your-username/docuscanner.git
cd docuscanner

Start Local Server

Choose one of the methods below to start a local server:

Option 1: Python

# Python 3.x
python -m http.server 8000

# Python 2.x
python -m SimpleHTTPServer 8000

Then open: http://localhost:8000

Option 2: Node.js with http-server

# Install globally (once)
npm install -g http-server

# Run in project directory
http-server -p 8000

# Or without installing (using npx)
npx http-server -p 8000

Then open: http://localhost:8000

Option 3: VS Code Live Server

1. Install Live Server extension by Ritwick Dey
2. Right-click on index.html
3. Select "Open with Live Server"

Option 4: PHP Built-in Server

php -S localhost:8000

Then open: http://localhost:8000

Option 5: Direct Open (Limited functionality)

Caution

Opening index.html directly via file:// protocol may cause camera access issues. Always use a local server for full functionality.

Project Structure

docuscanner/
├── index.html          # Main HTML structure
├── style.css           # Styling & animations
├── script.js           # Scanner logic
└── README.md           # Documentation

Usage Guide

Step-by-Step

1. Allow Camera Access

   • Click "Allow" when browser requests camera permission
   • App uses back camera by default (environment facing)

2. Frame Your Document

   • Position document within the green corner markers
   • Ensure good lighting for optimal scan quality

3. Scan Document

   • Click "Scan Document" button
   • Watch the scanning animation (line moves up-down with flash)

4. Review Result

   • Scanned image appears in the same frame
   • Two options available:
     • "Rescan" (green) - Take another scan
     • "Save PDF" (red) - Download as PDF

5. Save or Rescan

   • PDF automatically formatted to A4 portrait with proper margins
   • Rescan resets camera for new document

Customization

Adjust Scan Animation Speed

Edit style.css - look for animation: scanMoveUpDown 3s

.scan-line-animation.active {
    animation: scanMoveUpDown 3s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    /* Change 3s to desired duration (e.g., 2s for faster, 4s for slower) */
}

Change Corner Marker Color

.corner-marker {
    border: 3px solid #00ff88;  /* Change #00ff88 to any color */
}

Modify PDF Format

Edit script.js - look for jsPDF initialization:

const doc = new jsPDF({
    unit: 'mm',
    format: 'a4',        // Change to 'letter', 'legal', etc.
    orientation: 'portrait'  // or 'landscape'
});

Browser Compatibility

Browser	Version	Support
Chrome	60+	Full
Firefox	55+	Full
Safari	12+	Full
Edge	79+	Full
Opera	47+	Full
iOS Safari	12+	Full
Chrome (Android)	60+	Full

Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest features
• Submit pull requests

Known Limitations

• No automatic edge detection (users must manually frame documents)
• No perspective correction (scans as-is from camera angle)
• No OCR (text recognition) - pure scanning only
• Requires HTTPS for production deployment (localhost HTTP works)

Privacy

• All processing happens locally in your browser
• No images are uploaded to any server
• Camera access is used only for live preview and scanning
• PDFs are generated client-side

Troubleshooting

Camera not working?

• Ensure you're running via local server (not file://)
• Check browser permissions for camera access
• Try different browser (Chrome recommended)

Scan animation not showing?

• Check browser console for errors
• Ensure CSS file is properly loaded

PDF looks blurry?

• Image enhancement is applied automatically
• Ensure good lighting when scanning

Roadmap (Future Ideas)

• Auto edge detection
• Multiple pages scanning
• QR code detection
• Cloud backup option
• Image filters (grayscale, B&W)
• Batch PDF export

Acknowledgments

• jsPDF - PDF generation library
• Font Awesome - Icons
• Inspired by CamScanner and Adobe Scan

License

MIT License

Copyright (c) 2026 Atex Ovi

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

---

100% open source — Free to use, modify, and share. Built for everyone, by everyone.