A modern, web-based document scanner built with React. Scan documents using your device's camera or upload existing images, process them for clarity, and convert them to PDF format.
- 📱 Mobile-optimized interface
- 📸 Capture documents using device camera
- 📤 Upload existing images
- ✂️ Smart document cropping
- 🔄 Portrait and landscape orientation support
- 📑 Multi-page document support
- 🔍 Image enhancement and processing
- 📋 Page reordering capabilities
- 🔎 Full-screen preview mode
- 📁 Export to PDF
- Node.js 18 or higher
- npm or yarn
- Clone the repository:
git clone https://github.com/addyosmani/scan.git
cd scan- Install dependencies:
npm install- Start the development server:
npm run dev- React - UI framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- Vite - Build tool
- react-webcam - Camera access
- react-easy-crop - Image cropping
- jsPDF - PDF generation
- Lucide React - Icons
-
Capture or Upload
- Click "Take Photo" to use your device's camera
- Click "Upload Image" to select an existing image
-
Crop and Adjust
- Use the cropping tool to select the document area
- Toggle between portrait and landscape orientation
- Confirm or cancel the crop
-
Manage Pages
- Add multiple pages to create a multi-page document
- Reorder pages using the arrow buttons
- Preview pages in full screen
- Delete unwanted pages
-
Export
- Click "Download PDF" to generate and download your document
- Use "Reset" to start over
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- OpenCV.js for image processing
- react-easy-crop for the cropping interface
- jsPDF for PDF generation
Addy Osmani - @addyosmani
Project Link: https://github.com/addyosmani/scan