tapmodo/Jcrop
Jcrop
Jcrop es una librería de recorte de imágenes en JavaScript que proporciona una interfaz basada en navegador para que los usuarios seleccionen y definan interactivamente regiones rectangulares de una imagen. Utiliza una superposición de imagen basada en DOM para envolver imágenes en contenedores relativos, permitiendo la colocación de manejadores de selección ajustables y restricciones de límite.
La herramienta se distingue por su soporte de entrada integral, traduciendo gestos táctiles e intercepciones de teclado en actualizaciones de coordenadas precisas tanto para entornos móviles como de escritorio. Cuenta con un motor capaz de aplicar restricciones de relación de aspecto personalizadas y calcular el ajuste máximo para áreas de selección para garantizar dimensiones de salida consistentes.
La librería cubre una amplia gama de capacidades de manipulación de imágenes, incluyendo transformación de coordenadas, aplicación de límites de selección y la gestión de múltiples áreas de recorte. Proporciona sincronización de estado basada en eventos para rastrear cambios de interacción y permite la restauración de estados de recorte guardados previamente.
Los usuarios pueden personalizar el comportamiento y la apariencia de la herramienta a través de opciones de estilo de interfaz y extensiones de lógica basadas en clases.
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.
