tapmodo/Jcrop
Jcrop
Jcrop est une bibliothèque JavaScript de recadrage d'image qui fournit une interface basée sur le navigateur pour permettre aux utilisateurs de sélectionner et définir interactivement des régions rectangulaires d'une image. Elle utilise une superposition d'image basée sur le DOM pour envelopper les images dans des conteneurs relatifs, permettant le placement de poignées de sélection ajustables et de contraintes de bordure.
L'outil se distingue par une prise en charge complète des entrées, traduisant les gestes tactiles et les interceptions clavier en mises à jour de coordonnées précises pour les environnements mobiles et desktop. Il dispose d'un moteur capable d'imposer des contraintes de ratio d'aspect personnalisées et de calculer l'ajustement maximal pour les zones de sélection afin d'assurer des dimensions de sortie cohérentes.
La bibliothèque couvre un large éventail de capacités de manipulation d'image, incluant la transformation de coordonnées, l'application de limites de sélection et la gestion de zones de recadrage multiples. Elle fournit une synchronisation d'état pilotée par les événements pour suivre les changements d'interaction et permet la restauration d'états de recadrage précédemment enregistrés.
Les utilisateurs peuvent personnaliser le comportement et l'apparence de l'outil via des options de style d'interface et des extensions de logique basées sur des classes.
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.
