whatisgithub

What is cropperjs?

fengyuanchen/cropperjs — explained in plain English

Analysis updated 2026-06-24

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

In one sentence

Cropper.js is a JavaScript library for adding interactive image cropping to web pages, letting users drag to select and cut a region of a photo, the kind of feature used for profile picture uploads.

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
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

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.

What is it built with?

TypeScriptJavaScript

How does it compare?

fengyuanchen/cropperjsformkit/auto-animatebuilderio/mitosis
Stars13,81813,82013,834
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasymoderate
Complexity2/51/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get 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.

So what is it?

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?

Frequently asked questions

What is cropperjs?

Cropper.js is a JavaScript library for adding interactive image cropping to web pages, letting users drag to select and cut a region of a photo, the kind of feature used for profile picture uploads.

What language is cropperjs written in?

Mainly TypeScript. The stack also includes TypeScript, JavaScript.

What license does cropperjs use?

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

How hard is cropperjs to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is cropperjs for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.