Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gregorein/cropclip
CropClip - an i mage cutter web application for cutting and exporting specific regions from images. Supports multiple images, custom cuts, zooming, panning, and dark mode.
https://github.com/gregorein/cropclip
canvas crop-image crop-tool dark-mode dark-theme file-saver image-cropping image-editor image-processing javascript joyui jszip light-mode light-theme mui react typescript web-application
Last synced: 7 days ago
JSON representation
CropClip - an i mage cutter web application for cutting and exporting specific regions from images. Supports multiple images, custom cuts, zooming, panning, and dark mode.
- Host: GitHub
- URL: https://github.com/gregorein/cropclip
- Owner: Gregorein
- License: mit
- Created: 2024-01-18T19:03:03.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-10-26T14:43:04.000Z (22 days ago)
- Last Synced: 2024-10-27T10:26:17.349Z (21 days ago)
- Topics: canvas, crop-image, crop-tool, dark-mode, dark-theme, file-saver, image-cropping, image-editor, image-processing, javascript, joyui, jszip, light-mode, light-theme, mui, react, typescript, web-application
- Language: TypeScript
- Homepage: https://cropclip.vercel.app
- Size: 1.09 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **Crop Clip**
[](https://www.patreon.com/Gregorein)
An intuitive web application for cutting and exporting specific regions from images. Load multiple images, define custom cuts, and download them individually or collectively as a ZIP file.
## **Table of Contents**
- [Features](#features)
- [Demo](#demo)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Running the App](#running-the-app)
- [Usage](#usage)
- [Loading Images](#loading-images)
- [Adding Cuts](#adding-cuts)
- [Navigating Images](#navigating-images)
- [Zoom and Pan](#zoom-and-pan)
- [Downloading Cuts](#downloading-cuts)
- [Dark Mode](#dark-mode)
- [Keyboard Shortcuts](#keyboard-shortcuts)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)
---
## **Features**
- **Multiple Image Support**: Load and manage multiple images simultaneously.
- **Custom Cuts**: Define and adjust cut regions with ease.
- **Image Navigator**: Quickly navigate between images and view cuts.
- **Zoom and Pan**: Zoom in/out and pan around images for precise cutting.
- **Download Options**:
- Download individual cuts.
- Download all cuts as a single ZIP file.
- **Dark Mode**: Toggle between light and dark themes.
- **Responsive UI**: A clean and intuitive interface that adapts to different screen sizes.
- **Keyboard Shortcuts**: Improve efficiency with handy shortcuts.
## **Demo**
Check out the live demo [here](https://cropclip.click)
---
## **ToDo's**
[] test project in major browsers:
[] Chrome,
[] Firefox,
[] Safari,
[] Edge,
[] Opera.
[] verify it works on tablet screens.
[] mobile device support.
[] test most used file formats.
[] support saving in different formats.
[] graceful error handling.
[] nice issue raising for non technical users.
[] also a nice feedback & feature suggestion something tool.
[] better accessibility - more keyboard shortcuts, better contrasts.
[] performance optimisation.
[] downloadable PWA!
## **Developing**
### **Prerequisites**
- **Node.js**: Ensure you have Node.js installed. You can download it [here](https://nodejs.org/).
### **Installation**
1. **Clone the Repository**
```bash
git clone https://github.com/Gregorein/CropClip.git
cd CropClip
```
2. **Install Dependencies**
```bash
npm install
```
Or if you use Yarn:
```bash
yarn install
```
3. **Running the App**
Start the development server:
```bash
npm start
```
Or with Yarn:
```bash
yarn start
```
Open your browser and navigate to http://localhost:3000 to view the app.
### **Usage**
1. Loading Images
* Click the Load Images button on the toolbar, or drag and drop images onto the app.
* Supported formats: JPEG, PNG, GIF, and other common image formats.
2. Adding Cuts
* Click the Add Cut button (Scissors icon) or press the Spacebar.
* A resizable and movable cut rectangle will appear on the image.
* Adjust the size and position by dragging the edges or the entire rectangle.
3. Navigating Images
* Use the Previous and Next arrows in the Image Navigator to switch between images.
* Click on an image name in the list to select it.
* Images with cuts will display a badge indicating the number of cuts.
4. Zoom and Pan
* Zoom In and Zoom Out using the magnifying glass icons.
* Reset Zoom to return to the default zoom level.
* Fit to Window adjusts the image to fit the viewport.
* Pan by clicking and dragging on the image.
5. Downloading Cuts
* Download Individual Cuts:
* Click the Download button (Image with down arrow) in the Image Navigator.
* Download All Cuts:
* Click the Download All button (Down arrow icon) in the Image Navigator.
* All cuts will be downloaded as a single ZIP file.
6. Dark Mode
* Open the About modal by clicking the Info icon.
* Toggle Dark Mode using the switch.
* Your theme preference will be saved for future visits.
### Keyboard Shortcuts
* Spacebar: Add a new cut to the active image.
* Arrow Left: Navigate to the previous image.
* Arrow Right: Navigate to the next image.
---
### Contributing
Contributions are welcome! Please follow these steps:
1. Fork the Repository
Click the Fork button at the top right of the repository page.
2. Create a Branch
```bash
git checkout -b feature/YourFeatureName
```
3. Commit Your Changes
```bash
git commit -m 'Add some feature'
```
4. Push to the Branch
```bash
git push origin feature/YourFeatureName
```
5. Open a Pull Request
Submit your pull request, and we'll review it as soon as possible.
## License
This project is licensed under the MIT License.
## Support
If you find this project helpful, please consider supporting me on Patreon.
[](https://www.patreon.com/Gregorein)
## Contact
- Twitter: [@Gregorein](https://x.com/Gregorein)
- Email: [[email protected]](mailto:[email protected])
- GitHub: [Gregorein](https://github.com/Gregorein)