fengyuanchen/cropperjs

★ 13,818TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((cropper.js))
    What it does
      Image cropping
      Region selection
      Photo adjustment
    Framework wrappers
      React wrapper
      Vue wrapper
      Angular wrapper
      Blazor wrapper
    Versioning
      Version 2 branch
      Version 1 branch
      Semantic versioning
    Use Cases
      Profile photo upload
      Image editing
      Photo selection

mindmap root((cropper.js)) What it does Image cropping Region selection Photo adjustment Framework wrappers React wrapper Vue wrapper Angular wrapper Blazor wrapper Versioning Version 2 branch Version 1 branch Semantic versioning Use Cases Profile photo upload Image editing Photo selection

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Let users crop and resize their profile photo before uploading it to your web app.

USE CASE 2

Build an image editing tool that lets users drag to select a specific rectangular region from any photo.

USE CASE 3

Add image cropping to a React, Vue, Angular, or Blazor app by installing one of the ready-made framework wrapper packages.

Tech stack

TypeScriptJavaScript

Getting it running

Difficulty · easy Time to first run · 30min

Version 2 is the current branch, if you need version 1 features switch to the v1 branch explicitly before installing.

MIT, use freely for any purpose including commercial projects, with no restrictions beyond keeping the copyright notice.

In plain English

Cropper.js is a JavaScript tool for cropping images, written in TypeScript. Cropping means letting a user select a region of a picture and cut it down to that area, the kind of feature you see when a website asks you to adjust your profile photo before uploading it. The project's one-line description is simply "JavaScript image cropper," and the README points to a website with a live demo. The README itself is sparse. It does not include installation steps or code examples on this page. Instead, most of what it offers is project information and links. It notes that this is the branch for version 2, and that anyone needing the older version 1 should switch to a separate v1 branch. The live website is the main place to actually see and learn how the tool works. A few housekeeping items are spelled out. The project follows Semantic Versioning, a common convention for numbering releases so that users can tell how big a change is. Its commit messages follow the Conventional Commits style, which is a standard format for describing changes in the project's history. The license is MIT, a permissive open source license, credited to the author Chen Fengyuan. The final part of the README lists related projects maintained by other people. These are wrappers that make Cropper.js easier to use inside specific web frameworks, such as Angular, React, Vue, Ember, and Blazor, plus a couple of other integrations. They are not separate croppers but adapters around this same core tool, so a developer working in one of those frameworks can pick the matching wrapper. In plain terms, this repository is the core engine for adding image cropping to a web page, and the README acts mostly as a directory: it confirms what the project is, which version branch you are on, how it is versioned and licensed, and where to find both the documentation website and the framework-specific helpers built on top of it.

Copy-paste prompts

Prompt 1

I want users to crop their profile picture before upload on my website. Show me how to set up Cropper.js v2 on a plain HTML page and get the cropped image as a file ready to upload.

Prompt 2

How do I get the selected crop region data from Cropper.js and send the cropped image blob as a file upload to my server?

Prompt 3

I'm building a React app and need image cropping. Which Cropper.js React wrapper should I use and how do I wire it up with a file input element?

Prompt 4

How do I lock the crop aspect ratio in Cropper.js to a square so users always crop profile photos at a 1 to 1 ratio?

Open on GitHub → Explain another repo

← fengyuanchen on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.