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

CropScore 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 GIF.

Currently the supported platforms are Hashnode, DEV, Medium, Hackernoon, Twitter, LinkedIn, YouTube, Pinterest, Facebook and Instagram. In the future I might add other sites recommended by the users.

• 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

NextJS - React application framework

React-cropper - For core cropper functionality

Flaticon, React-icons - For the icons

Chakra UI - For the components

GitHub - To host the code

Netlify - To deploy the project

ESLint, prettier - For linting and code formatting

Namecheap - For custom subdomain (configured on Netlify)

CropScore is an open source project. The feature requests are welcome.

The project is under the terms of MIT license.