# tapmodo/jcrop

**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/tapmodo-jcrop).**

4,279 stars · 918 forks · JavaScript · NOASSERTION

## Links

- GitHub: https://github.com/tapmodo/Jcrop
- Homepage: https://jcrop.com
- awesome-repositories: https://awesome-repositories.com/repository/tapmodo-jcrop.md

## Description

Jcrop is a JavaScript image cropping library that provides a browser-based interface for users to interactively select and define rectangular regions of an image. It utilizes a DOM-based image overlay to wrap images in relative containers, allowing for the placement of adjustable selection handles and boundary constraints.

The tool distinguishes itself through comprehensive input support, translating touch gestures and keyboard intercepts into precise coordinate updates for both mobile and desktop environments. It features an engine capable of enforcing custom aspect ratio constraints and calculating the maximum fit for selection areas to ensure consistent output dimensions.

The library covers a broad range of image manipulation capabilities, including coordinate transformation, selection boundary enforcement, and the management of multiple crop areas. It provides event-driven state synchronization to track interaction changes and allows for the restoration of previously saved crop states.

Users can customize the tool's behavior and appearance through interface styling options and class-based logic extensions.

## Tags

### Graphics & Multimedia

- [Client-Side Image Editing](https://awesome-repositories.com/f/graphics-multimedia/client-side-image-editing.md) — Provides a browser-based tool for interactively selecting and adjusting image cropping boundaries.
- [Fixed Aspect Ratios](https://awesome-repositories.com/f/graphics-multimedia/fixed-aspect-ratios.md) — Enforces a constant relationship between width and height to ensure consistent output dimensions.
- [Image Cropping Tools](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-editors/image-cropping-tools.md) — Provides the primary capability to define and manipulate a crop area to extract a specific image region. ([source](https://jcrop.com))
- [Coordinate Calculation](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-editors/image-cropping-tools/crop-coordinate-export/coordinate-calculation.md) — Calculates precise pixel-level offsets and boundaries to define the region of an image to be extracted.
- [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 overlay that lets users manually adjust the coordinates and dimensions of a crop region. ([source](https://jcrop.com/examples/))
- [Real-time Coordinate Tracking](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-editors/image-cropping-tools/crop-coordinate-export/real-time-coordinate-tracking.md) — Retrieves current cropping coordinates via instance properties and real-time event listeners that trigger on state changes. ([source](https://jcrop.com/guide/))
- [Maximum Fit Algorithms](https://awesome-repositories.com/f/graphics-multimedia/media-aspect-ratio-croppers/preset-aspect-ratio-croppers/maximum-fit-algorithms.md) — Determines the largest possible rectangle dimensions that maintain a specific aspect ratio within a given width and height. ([source](https://jcrop.com/objects/rect.html))

### User Interface & Experience

- [Image Cropping Components](https://awesome-repositories.com/f/user-interface-experience/image-cropping-components.md) — Provides an interactive user interface component for defining and adjusting crop areas over images with responsive coordinates.
- [Aspect Ratio Constraints](https://awesome-repositories.com/f/user-interface-experience/constraint-layout-engines/aspect-ratio-constraints.md) — Provides a mechanism to enforce specific width-to-height proportions during interactive image selection.
- [Interactive Selection Overlays](https://awesome-repositories.com/f/user-interface-experience/image-cards/interactive-selection-overlays.md) — Uses an interactive DOM layer to wrap images and provide adjustable handles for region selection.
- [Mobile Touch Handlers](https://awesome-repositories.com/f/user-interface-experience/input-handling/mobile-touch-handlers.md) — Processes mobile touch events to allow resizing and moving of image selection areas.
- [Cropping Input Adapters](https://awesome-repositories.com/f/user-interface-experience/input-handling/mobile-touch-handlers/keyboard-and-touch-adapters/cropping-input-adapters.md) — Implements a responsive interface that translates touch and keyboard inputs into precise image cropping coordinates.
- [Touch Gesture Libraries](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-libraries.md) — Translates raw touch inputs into coordinate updates for manipulating crop selections on mobile devices.
- [Coordinate Space Transformations](https://awesome-repositories.com/f/user-interface-experience/coordinate-systems/coordinate-transform-hierarchies/coordinate-space-transformations.md) — Normalizes and transforms image dimensions and coordinates between the raw pixel space and the DOM overlay space. ([source](https://jcrop.com/objects/rect.html))
- [Event-Driven State Synchronizers](https://awesome-repositories.com/f/user-interface-experience/event-driven-state-managers/event-driven-state-synchronizers.md) — Uses a callback system to synchronize the UI state with changes in crop coordinates and widget status.
- [Multi-Overlay Management](https://awesome-repositories.com/f/user-interface-experience/image-cropping-components/multi-overlay-management.md) — Creates, focuses, or removes multiple distinct overlays within a single instance using individual configurations. ([source](https://jcrop.com/guide/))
- [Multiple Selection Areas](https://awesome-repositories.com/f/user-interface-experience/image-cropping-components/multiple-selection-areas.md) — Creates one or more selectable regions over an image with support for aspect ratio locking and size constraints. ([source](https://cdn.jsdelivr.net/gh/tapmodo/jcrop@master/README.md))
- [Interactive Widgets](https://awesome-repositories.com/f/user-interface-experience/interactive-widgets.md) — Implements a customizable UI widget that captures user input to define crop regions.
- [Keyboard-Driven Selection Controls](https://awesome-repositories.com/f/user-interface-experience/keyboard-driven-selection-controls.md) — Allows moving selection boundaries using keyboard inputs and intercepts specific keys to prevent page scrolling. ([source](https://cdn.jsdelivr.net/gh/tapmodo/jcrop@master/README.md))
- [Movement Boundary Constraints](https://awesome-repositories.com/f/user-interface-experience/movement-boundary-constraints.md) — Clamps the position of cropping handles and selection areas to ensure they remain within the image bounding box. ([source](https://jcrop.com/objects/rect.html))
- [UI Overlay Wrappers](https://awesome-repositories.com/f/user-interface-experience/ui-overlay-wrappers.md) — Attaches a tool to a DOM element and wraps images in a relative container to position UI overlays. ([source](https://jcrop.com/guide/instance.html))
- [Widget Event Callbacks](https://awesome-repositories.com/f/user-interface-experience/widget-event-callbacks.md) — Triggers programmable hooks when the cropping widget is moved, updated, or activated. ([source](https://jcrop.com/guide/events.html))

### 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) — Calculates the precise relationship between browser DOM coordinates and actual source image pixels for accurate cropping.

### Web Development

- [Overlay Positioning](https://awesome-repositories.com/f/web-development/css-alignment-techniques/overlay-positioning.md) — Implements interactive layers positioned precisely over images to facilitate region selection.

### Software Engineering & Architecture

- [Keyboard Navigation Interception](https://awesome-repositories.com/f/software-engineering-architecture/event-interception/keyboard-navigation-interception.md) — Intercepts keyboard inputs to move selection boundaries while preventing default browser page scrolling.