Introducing CropScore ✂️

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

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.

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 - 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)

License 📚

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

The project is under the terms of MIT license.

Comments

Support padding in addition to cropping

It would be awesome if this supported padding out an image to the specified aspect ratio/dimensions in addition to cropping it. Platforms like Twitter will size a posted image to fill the frame, cropping off anything outside it. You avoid this by posting the right aspect ratio, but sometimes, such as with an odd-sized screenshot, cropping would remove key content. Instead, the only solution to avoid being cropped in the timeline is to pad out the smaller dimension with blank space (ideally a selectable color).

opened by scottsb 1

A chat logs online saver for discord bots to save messages history & cleared messages online

Chat Logs NPM package that saves messages online to view it later Useful for bots where users can save messages history & cleared messages online Supp

Dec 28, 2022

Content aware image cropping

smartcrop.js Smartcrop.js implements an algorithm to find good crops for images. It can be used in the browser, in node or via a CLI. Image: https://w

Jan 4, 2023

🖼️ Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.

Next.js Image Proxy Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component. ❔ Motivation This library makes it poss

Dec 1, 2022

A Javascript library that discourages and prevents image theft/download by preventing client ability to retrieve the image.

ProtectImage.js ProtectImage.js is a Javascript library that helps prevent image theft by disabling traditional user interactions to download/copy ima

Aug 18, 2022

Simple JavaScript Library to add parallax image to background-image

Backpax Simple JavaScript Library to add parallax image to background-image Install $ npm install backpax --save Demo Demo page is here Usage If you

Oct 12, 2022

App that receives data from a microcontroller that is set up at your electricity meter, which at certain intervals will send an image to be processed, this then gets sent to a Python instance which will get the data read from the image. That data gets sent back and will be saved to the account this meter belongs to. This gives you the ability to track your currently analog meter in a digtal environment.

Usage App Server About this project App that receives data from a microcontroller that is set up at your electricity meter, which at certain intervals

Dec 20, 2022

This project is a web application that allows the user to select a location on a map, display the selected region, and capture an image of that region. The captured image is then applied as a texture to a 3D cuboid using BabylonJS.

Map-Babylon Client repo commit details https://github.com/hashmat-noorani/mapbox-babylon-client Server repo commit details https://github.com/hashmat

Mar 21, 2023

:fireworks:Interactive Online Platform that Visualizes Algorithms from Code

Algorithm Visualizer Algorithm Visualizer is an interactive online platform that visualizes algorithms from code. Learning an algorithm gets much easi

Free, open source game engine online

microStudio is a free, open source game engine online. It is also a platform to learn and practise programming. microStudio can be used for free at ht

Dec 30, 2022