tapmodo/Jcrop

Features

• Client-Side Image Editing - Provides a browser-based tool for interactively selecting and adjusting image cropping boundaries.
• Image Cropping Components - Provides an interactive user interface component for defining and adjusting crop areas over images with responsive coordinates.
• DOM-to-Pixel Coordinate Mappings - Calculates the precise relationship between browser DOM coordinates and actual source image pixels for accurate cropping.
• Fixed Aspect Ratios - Enforces a constant relationship between width and height to ensure consistent output dimensions.
• Image Cropping Tools - Provides the primary capability to define and manipulate a crop area to extract a specific image region.
• Coordinate Calculation - Calculates precise pixel-level offsets and boundaries to define the region of an image to be extracted.
• Interactive Crop and Transform Tools - Provides an interactive overlay that lets users manually adjust the coordinates and dimensions of a crop region.
• Aspect Ratio Constraints - Provides a mechanism to enforce specific width-to-height proportions during interactive image selection.
• Interactive Selection Overlays - Uses an interactive DOM layer to wrap images and provide adjustable handles for region selection.
• Mobile Touch Handlers - Processes mobile touch events to allow resizing and moving of image selection areas.
• Cropping Input Adapters - Implements a responsive interface that translates touch and keyboard inputs into precise image cropping coordinates.
• Touch Gesture Libraries - Translates raw touch inputs into coordinate updates for manipulating crop selections on mobile devices.
• Overlay Positioning - Implements interactive layers positioned precisely over images to facilitate region selection.
• Real-time Coordinate Tracking - Retrieves current cropping coordinates via instance properties and real-time event listeners that trigger on state changes.
• Maximum Fit Algorithms - Determines the largest possible rectangle dimensions that maintain a specific aspect ratio within a given width and height.
• Keyboard Navigation Interception - Intercepts keyboard inputs to move selection boundaries while preventing default browser page scrolling.
• Coordinate Space Transformations - Normalizes and transforms image dimensions and coordinates between the raw pixel space and the DOM overlay space.
• Event-Driven State Synchronizers - Uses a callback system to synchronize the UI state with changes in crop coordinates and widget status.
• Multi-Overlay Management - Creates, focuses, or removes multiple distinct overlays within a single instance using individual configurations.
• Multiple Selection Areas - Creates one or more selectable regions over an image with support for aspect ratio locking and size constraints.
• Interactive Widgets - Implements a customizable UI widget that captures user input to define crop regions.
• Keyboard-Driven Selection Controls - Allows moving selection boundaries using keyboard inputs and intercepts specific keys to prevent page scrolling.
• Movement Boundary Constraints - Clamps the position of cropping handles and selection areas to ensure they remain within the image bounding box.
• UI Overlay Wrappers - Attaches a tool to a DOM element and wraps images in a relative container to position UI overlays.
• Widget Event Callbacks - Triggers programmable hooks when the cropping widget is moved, updated, or activated.

Star history