Skip to content

Privacy-first, client-side batch image cropping tool. No uploads, no servers — runs entirely in your browser.

License

Notifications You must be signed in to change notification settings

Ic3burG/BatchCropper

Repository files navigation

BatchCropper

CI Deploy to GitHub Pages License Live Demo

A fast, privacy-first, client-side batch image cropping tool that runs entirely in your browser. No uploads, no servers, no accounts — just drop your images, set a crop region once, and download all cropped files in a ZIP.

🔒 Privacy First

BatchCropper is designed with your privacy as the top priority.

  • 100% Client-Side: All image processing happens directly in your browser using the Canvas API. No image data is ever uploaded to a server.
  • No Dependencies to Install: Open index.html in any modern browser and start cropping immediately.
  • Your Files, Your Control: Files never leave your device.

Features

  • 🖼️ Batch Processing: Load multiple images at once and apply the same crop region to all of them.
  • ✂️ Visual Crop Editor: Drag to draw a crop selection with resizable handles and a rule-of-thirds grid overlay.
  • 🔢 Precise Numeric Input: Enter exact pixel coordinates for pixel-perfect crops.
  • 🔍 Zoom Controls: Zoom in/out and fit-to-screen for detailed editing.
  • 📦 ZIP Export: Download all cropped images in a single ZIP file via JSZip.
  • 🎨 Format Selection: Export as PNG, JPEG, or WebP.
  • 🌑 Dark Mode UI: Clean, minimal dark interface with IBM Plex Mono/Sans typography.

Usage

Try it now: ic3burg.github.io/BatchCropper — no install required.

  1. Open the live demo or index.html locally in any modern browser (Chrome, Firefox, Safari, Edge).
  2. Drop your images onto the canvas area, or click to browse.
  3. Draw a crop region by dragging on the image preview.
  4. Adjust using the numeric inputs (X, Y, Width, Height) for precision.
  5. Select your desired export format (PNG, JPEG, or WebP).
  6. Download — click "Download All Cropped" to get a ZIP of all processed images.

How It Works

  • Images are loaded as File objects via the File API.
  • The crop region is defined in native image pixels (independent of zoom level).
  • On export, each image is drawn onto an off-screen <canvas> clipped to the crop rect, then converted to a Blob.
  • All Blobs are bundled into a ZIP using JSZip (loaded on-demand from a CDN).

Browser Compatibility

Browser Support
Chrome / Edge ✅ Full
Firefox ✅ Full
Safari ✅ Full
Mobile browsers ⚠️ Limited (mouse-based crop UI)

Running Locally

No build step required. Simply open the file:

open index.html
# or serve with any static server:
npx serve .

Development Setup

BatchCropper has no build step for end users, but contributors need Node.js (v18+) to run the Prettier formatter.

git clone https://github.com/Ic3burG/BatchCropper.git
cd BatchCropper
npm install

# Activate the pre-push hook (one-time setup)
git config core.hooksPath .githooks
Command Description
npm run format Auto-format all files with Prettier
npm run format:check Check formatting without writing (used by CI)

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines and information about our Contributor License Agreement (CLA).

License

This project is licensed under the GNU Affero General Public License v3.0 or later — see the LICENSE file for details.

Commercial Licensing

Commercial licensing is available for enterprises and professional use cases that require alternative terms. Please contact OJD Technical Solutions for more information.

About

Privacy-first, client-side batch image cropping tool. No uploads, no servers — runs entirely in your browser.

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors