# fengyuanchen/cropperjs

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/fengyuanchen-cropperjs).**

13,834 stars · 2,441 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/fengyuanchen/cropperjs
- Homepage: https://fengyuanchen.github.io/cropperjs/
- awesome-repositories: https://awesome-repositories.com/repository/fengyuanchen-cropperjs.md

## Topics

`cropper` `cropperjs` `image-cropper` `image-processing` `javascript`

## Description

Cropper.js is a JavaScript image cropping library and client-side image editor. It provides a front-end interface for manipulating image geometry and extracting specific regions using the HTML5 Canvas API.

The library enables interactive image cropping where users can manually select areas and define clipping regions. It supports geometry transformations including rotation, scaling, and zooming to align subjects, and allows for the enforcement of dynamic aspect ratios.

The tool provides capabilities for exporting crop data as coordinates or canvas representations and offers access to internal HTML elements for custom styling. It includes mechanisms for instance lifecycle management to remove the interface and clean up associated resources.

## Tags

### Graphics & Multimedia

- [Interactive Crop and Transform Tools](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-editors/image-cropping-tools/interactive-crop-and-transform-tools.md) — Provides an interactive interface for cropping, zooming, and rotating images within a web browser.
- [Client-Side Image Editing](https://awesome-repositories.com/f/graphics-multimedia/client-side-image-editing.md) — Enables adjusting image orientation, scale, and cropping boundaries directly in the browser before processing.
- [Client-Side](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-editors/client-side.md) — Provides a comprehensive front-end interface for adjusting image orientation and defining crop areas.
- [Crop Coordinate Export](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-editors/image-cropping-tools/crop-coordinate-export.md) — Generates a canvas representation or a dataset of coordinates and dimensions for the selected crop area. ([source](https://fengyuanchen.github.io/cropperjs/v1/))

### User Interface & Experience

- [Aspect Ratio Constraints](https://awesome-repositories.com/f/user-interface-experience/constraint-layout-engines/aspect-ratio-constraints.md) — Enforces specific width-to-height proportions on the cropping area to ensure consistent image dimensions.
- [Image Cropping Components](https://awesome-repositories.com/f/user-interface-experience/image-cropping-components.md) — Implements a customizable UI component for defining and adjusting image crop areas with aspect ratio support.
- [Canvas-Based Image Editors](https://awesome-repositories.com/f/user-interface-experience/ui-components/image-view-components/image-manipulation-tools/raw-image-data-manipulators/canvas-based-image-editors.md) — Uses the HTML5 Canvas API to render and extract the final cropped image region.
- [Visual Orientation Transforms](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/css-transform-animations/visual-orientation-transforms.md) — Employs CSS3 transformations for image rotation and scaling to align subjects without modifying source data.
- [Natural Dimension Scaling](https://awesome-repositories.com/f/user-interface-experience/image-dimension-calculators/natural-dimension-scaling.md) — Maintains consistent aspect ratios by calculating the scale factor between the displayed image and its natural dimensions.

### Artificial Intelligence & ML

- [DOM-to-Pixel Coordinate Mappings](https://awesome-repositories.com/f/artificial-intelligence-ml/bounding-box-regression/bounding-box-representations/bounding-box-coordinate-predictors/pixel-coordinate-mappings/dom-to-pixel-coordinate-mappings.md) — Maps DOM element positions to source image pixel coordinates to accurately define crop regions.

### Part of an Awesome List

- [Selection Handle Tracking](https://awesome-repositories.com/f/awesome-lists/devtools/touch-and-mouse-events/selection-handle-tracking.md) — Updates crop box coordinates in real-time by listening to user interactions on selection handles.

### Networking & Communication

- [Profile Photo Framing](https://awesome-repositories.com/f/networking-communication/telegram-bot-frameworks/profile-editing/bot-profile-links/profile-photo-uploads/profile-photo-framing.md) — Allows users to frame and crop their own photos to fit profile requirements before uploading.