Image Slicing & Grid Maker Tool

A powerful, client-side web application for slicing images into grids and designing printable paper layouts. Built with performance and privacy in mind—all processing happens locally in your browser.

🚀 Features

✂️ Image Slicer

• Instant Slicing: Drag & drop any image to slice it into a customized grid (up to 50x50).
• Smart Margins: Exclude specific margins (top, bottom, left, right) from the slicing process.
• Client-Side Processing: No image upload to servers; everything is processed in your browser.
• Bulk Download: Download all slices instantly as a .zip file.

📐 Grid Maker

• Printable Layouts: Create precise grid layouts for A3, A4, A5, and A6 paper sizes.
• Millimeter Precision: Configure column width, row height, and gaps in millimeters.
• Multi-Image Auto-Fill: Upload a batch of images to automatically fill grid cells across multiple pages.
• Style Customization:
  • Toggle borders.
  • Add cell numbering (with custom start number).
• High-Res Export: Export layouts as 300 DPI PNGs or a multi-page ZIP archive.

🛠️ Installation & Setup

1. Clone the repository

   git clone https://github.com/your-username/img-slices.git
   cd img-slices

2. Install dependencies

   npm install

3. Run locally

   npm run dev

   Visit http://localhost:5173 in your browser.

4. Build for production

   npm run build

   The output will be in the dist/ directory.

📦 Deployment

This project is pre-configured for GitHub Pages.

1. Push the code to your GitHub repository.
2. A GitHub Action (.github/workflows/deploy.yml) will automatically build and deploy the site.
3. Ensure your repository settings have Pages Source set to GitHub Actions.

💻 Tech Stack

• Vite: Next Generation Frontend Tooling
• Vanilla JavaScript: Lightweight and fast
• JSZip: Create, read and edit .zip files
• FileSaver.js: HTML5 saveAs() implementation