{"id":19307927,"url":"https://github.com/gregorein/cropclip","last_synced_at":"2026-05-03T20:33:48.597Z","repository":{"id":218054080,"uuid":"745161611","full_name":"Gregorein/cropclip","owner":"Gregorein","description":"CropClip - an image cutter web application for cutting and exporting specific regions from images. Supports multiple images, custom cuts, zooming, panning, and dark mode.","archived":false,"fork":false,"pushed_at":"2025-04-11T15:23:40.000Z","size":1144,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-13T06:43:01.971Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://cropclip.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gregorein.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"Gregorein"}},"created_at":"2024-01-18T19:03:03.000Z","updated_at":"2025-04-11T15:23:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"68bd5d3e-f6c9-4184-91d5-96a09e61035f","html_url":"https://github.com/Gregorein/cropclip","commit_stats":null,"previous_names":["gregorein/cropclip"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Gregorein/cropclip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gregorein%2Fcropclip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gregorein%2Fcropclip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gregorein%2Fcropclip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gregorein%2Fcropclip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gregorein","download_url":"https://codeload.github.com/Gregorein/cropclip/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gregorein%2Fcropclip/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278494648,"owners_count":25996414,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-11-10T00:13:04.933Z","updated_at":"2025-10-05T18:11:08.426Z","avatar_url":"https://github.com/Gregorein.png","language":"TypeScript","funding_links":["https://patreon.com/Gregorein","https://www.patreon.com/Gregorein"],"categories":[],"sub_categories":[],"readme":"# **Crop Clip**\n\n[![Patreon](https://img.shields.io/badge/Support-Patreon-red.svg)](https://www.patreon.com/Gregorein)\n\n\nAn 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.\n\n![Image Cutter Screenshot](assets/socialTemplate.png)\n\n## **Table of Contents**\n\n- [Features](#features)\n- [Demo](#demo)\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n  - [Running the App](#running-the-app)\n- [Usage](#usage)\n  - [Loading Images](#loading-images)\n  - [Adding Cuts](#adding-cuts)\n  - [Navigating Images](#navigating-images)\n  - [Zoom and Pan](#zoom-and-pan)\n  - [Downloading Cuts](#downloading-cuts)\n  - [Dark Mode](#dark-mode)\n- [Keyboard Shortcuts](#keyboard-shortcuts)\n- [Contributing](#contributing)\n- [License](#license)\n- [Contact](#contact)\n\n---\n\n## **Features**\n\n- **Multiple Image Support**: Load and manage multiple images simultaneously.\n- **Custom Cuts**: Define and adjust cut regions with ease.\n- **Image Navigator**: Quickly navigate between images and view cuts.\n- **Zoom and Pan**: Zoom in/out and pan around images for precise cutting.\n- **Download Options**:\n  - Download individual cuts.\n  - Download all cuts as a single ZIP file.\n- **Dark Mode**: Toggle between light and dark themes.\n- **Responsive UI**: A clean and intuitive interface that adapts to different screen sizes.\n- **Keyboard Shortcuts**: Improve efficiency with handy shortcuts.\n\n## **Demo**\n\nCheck out the live demo [here](https://cropclip.click)\n\n---\n\n## **ToDo's**\n[] test project in major browsers:  \n   [] Chrome,  \n   [] Firefox, \n   [] Safari,  \n   [] Edge,  \n   [] Opera.  \n[] verify it works on tablet screens.  \n[] mobile device support.  \n[] test most used file formats.  \n[] support saving in different formats.  \n[] graceful error handling.  \n[] nice issue raising for non technical users.  \n[] also a nice feedback \u0026 feature suggestion something tool.  \n[] better accessibility - more keyboard shortcuts, better contrasts.  \n[] performance optimisation.  \n[] downloadable PWA!  \n\n## **Developing**\n\n### **Prerequisites**\n\n- **Node.js**: Ensure you have Node.js installed. You can download it [here](https://nodejs.org/).\n\n### **Installation**\n\n1. **Clone the Repository**\n\n   ```bash\n   git clone https://github.com/Gregorein/CropClip.git\n   cd CropClip\n   ```\n\n2. **Install Dependencies**\n\n   ```bash\n   npm install\n   ```\n\n   Or if you use Yarn:\n\n   ```bash\n   yarn install\n   ```\n\n3. **Running the App**  \n   Start the development server:\n   \n   ```bash\n   npm start\n   ```\n\n   Or with Yarn:\n   ```bash\n   yarn start\n   ```\n   \n   Open your browser and navigate to http://localhost:3000 to view the app.\n\n### **Usage**\n1. Loading Images\n\n   * Click the Load Images button on the toolbar, or drag and drop images onto the app.\n   *  Supported formats: JPEG, PNG, GIF, and other common image formats.\n\n2. Adding Cuts\n\n   * Click the Add Cut button (Scissors icon) or press the Spacebar.\n   * A resizable and movable cut rectangle will appear on the image.\n   * Adjust the size and position by dragging the edges or the entire rectangle.\n\n3. Navigating Images\n\n   * Use the Previous and Next arrows in the Image Navigator to switch between images.\n   * Click on an image name in the list to select it.\n   * Images with cuts will display a badge indicating the number of cuts.\n\n4. Zoom and Pan\n\n   * Zoom In and Zoom Out using the magnifying glass icons.\n   * Reset Zoom to return to the default zoom level.\n   * Fit to Window adjusts the image to fit the viewport.\n   * Pan by clicking and dragging on the image.\n\n5. Downloading Cuts\n\n   * Download Individual Cuts:\n      *  Click the Download button (Image with down arrow) in the Image Navigator.\n   * Download All Cuts:\n      *  Click the Download All button (Down arrow icon) in the Image Navigator.\n      *  All cuts will be downloaded as a single ZIP file.\n\n6. Dark Mode\n\n   * Open the About modal by clicking the Info icon.\n   * Toggle Dark Mode using the switch.\n   * Your theme preference will be saved for future visits.\n\n### Keyboard Shortcuts\n\n   * Spacebar: Add a new cut to the active image.\n   * Arrow Left: Navigate to the previous image.\n   * Arrow Right: Navigate to the next image.\n---\n\n### Contributing\nContributions are welcome! Please follow these steps:\n\n1. Fork the Repository\n   Click the Fork button at the top right of the repository page.\n\n2. Create a Branch\n   ```bash\n   git checkout -b feature/YourFeatureName\n   ```\n3. Commit Your Changes\n   ```bash\n   git commit -m 'Add some feature'\n   ```\n\n4. Push to the Branch\n   ```bash\n    git push origin feature/YourFeatureName\n   ```\n\n5. Open a Pull Request  \nSubmit your pull request, and we'll review it as soon as possible.\n\n## License\n\nThis project is licensed under the MIT License.\n\n## Support\n\nIf you find this project helpful, please consider supporting me on Patreon.\n\n[![Support on Patreon](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/Gregorein)\n\n\n## Contact\n- Twitter: [@Gregorein](https://x.com/Gregorein) \n- Email: [hello@gregore.in](mailto:hello@gregore.in)\n- GitHub: [Gregorein](https://github.com/Gregorein)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregorein%2Fcropclip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgregorein%2Fcropclip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregorein%2Fcropclip/lists"}