https://github.com/madzadev/cropper

✂ An online image cropper for content creators
https://github.com/madzadev/cropper

crop-image cropper image image-processing reactjs

Last synced: about 1 month ago
JSON representation

✂ An online image cropper for content creators

• Host: GitHub
• URL: https://github.com/madzadev/cropper
• Owner: madzadev
• License: mit
• Created: 2022-02-04T19:31:35.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-08T10:52:03.000Z (almost 2 years ago)
• Last Synced: 2024-02-17T12:36:22.416Z (7 months ago)
• Topics: crop-image, cropper, image, image-processing, reactjs
• Language: JavaScript
• Homepage: https://cropper.madza.dev
• Size: 1.27 MB
• Stars: 61
• Watchers: 2
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Introducing CropScore ✂️

Resolutions and aspect ratios should be the last things you worry about.

## About 👀

[CropScore](https://cropper.madza.dev) is an online image cropper for content creators, that calculates the score of how well the real-time crop will fit for the target use.

The user is in full control of the upper and lower bounds of the resolutions and the correct aspect ratios are automatically set. All you have to do is drag and see the magic.

![Preview](https://github.com/madzadev/cropper/blob/main/public/social-card.png)

Currently the supported platforms are [Hashnode](https://hashnode.com), [DEV](https://dev.to), [Medium](https://medium.com), [Hackernoon](https://hackernoon.com), [Twitter](https://twitter.com), [LinkedIn](https://linkedin.com), [YouTube](https://youtube.com), [Pinterest](https://pinterest.com), [Facebook](https://facebook.com) and [Instagram](https://instagram.com). In the future I might add other sites recommended by the users.

## Features ✨

- Image upload - supported formats .JPG and .PNG

- Presets - Currently there are 33 presets from 10 commonly used platforms

- Custom mode - User is allowed to switch to custom resolutions

- Ratio lock - User can lock any custom aspect ratio

- Input validation - Informative warning messages for invalid inputs

- Move tools - User can move the image around

- Zoom tools - Zoom the image in or out to get the precise crops

- Rotate tools - Rotate image clockwise or counter-clockwise by 45 degree increments

- Transform image - Swap image on X or Y axis

- Resolution data - Updated in real time as you resize the crop window

- Crop Score - Real-time crop score of the fit for the target use

- Image preview - The user is allowed to preview the crop

- Reset - Reset image and crop windows as they were when the image was uploaded

- Download - Download the image as .PNG or .JPG

- Responsive - Use the Cropper on any device

## Tech Stack 🛠️

[NextJS](https://nextjs.org/) - React application framework

[React-cropper](https://www.npmjs.com/package/react-cropper) - For core cropper functionality

[Flaticon](https://www.flaticon.com/), [React-icons](https://react-icons.github.io/react-icons/) - For the icons

[Chakra UI](https://chakra-ui.com/) - For the components

[GitHub](https:/github.com) - To host the code

[Netlify](https://netlify.com) - To deploy the project

[ESLint](https://eslint.org/), [prettier](https://prettier.io/) - For linting and code formatting

[Namecheap](https://www.namecheap.com/) - For custom subdomain (configured on Netlify)

## License 📚

[CropScore](https://cropper.madza.dev) is an open source project. The feature requests are welcome.

The project is under the terms of [MIT license](https://choosealicense.com/licenses/mit/).