The Interactive Image Cropping system provides precise, real-time image cropping with live preview capabilities. It automatically handles aspect ratio constraints, provides visual feedback, and integrates seamlessly with the model management workflow for optimal image processing.

Real-Time Interactive Cropping - Drag, resize, and position crop area visually Live Preview - See final result before saving Automatic Aspect Ratio - Maintains target dimensions precisely Model-Specific Settings - Customizable dimensions per model Batch Processing - “Save Cropped & Next” for efficient workflows Quality Optimization - Professional-grade image processing Format Support - JPEG, PNG, WebP input with JPEG output

Visual Interface:

Red Dashed Border - Shows current crop selection Corner Handles - Drag to resize crop area Move Area - Click and drag center to reposition Aspect Ratio Lock - Automatically maintains target proportions

Mouse Controls:

Click and Drag - Move crop area Corner Dragging - Resize while maintaining aspect ratio Double-Click - Quick save (with “Save Cropped & Next”) Mouse Wheel - Fine positioning (if supported)

Real-Time Updates:

Preview updates instantly as you adjust crop area Shows exact final image at target dimensions Displays actual pixel dimensions Provides visual feedback for quality assessment

Uploaded Image - Image must be in uploads directory Model Configuration - Target dimensions set for model Browser Support - Modern browser with JavaScript enabled File Permissions - Write access to models directory

From Image Selector:

Select image in AI Image Selector Click “Select & Crop” button Automatic redirect to cropping interface

From Upload:

Upload image through upload interface Automatic redirect to cropping interface Image temporarily stored in uploads folder

Navigation Links:

« Back to Models - Return to main models page < Back to Upload - Return to upload interface Control Panel Home - Main admin dashboard

Information Display:

Target Size - Configured dimensions for this model Original Size - Source image dimensions Instructions - Quick usage guide

Left Panel - Image Canvas:

Source Image - Scaled for display if necessary Crop Overlay - Interactive red selection box Scale Indicator - Shows if image is scaled for display

Right Panel - Preview & Controls:

Live Preview - Real-time crop result Coordinate Display - Current crop position and size Target Information - Final dimensions and aspect ratio

Located at the top for easy access:

Save Cropped Image - Save and return to models Save Cropped & Next - Save and process next model Reset Crop - Return to default crop area Cancel - Abort without saving

Automatic Initialization:

System calculates optimal initial crop area Centers crop in image with maximum size Maintains target aspect ratio from start Displays current coordinates and dimensions

Positioning:

Click and drag the crop area to move it Use corner handles to resize Maintain aspect ratio automatically Stay within image boundaries

Fine-Tuning:

Use coordinate display for precise positioning Preview updates in real-time Adjust for optimal composition Consider subject positioning

Quality Check:

Review live preview for quality Ensure subject is properly framed Check for any cropping artifacts Verify dimensions meet requirements

Save Options:

Regular Save - Complete current model and return Save & Next - Batch processing to next model Reset - Start over with new crop area

Configuration:

Each model can have custom target dimensions Default fallback: 260×400 pixels (configurable) Minimum dimensions enforced: 50×50 pixels Aspect ratio calculated automatically

Database Integration:

model_image_width field - Custom width model_image_height field - Custom height Global defaults from $MODWSIZE and $MODHSIZE Runtime validation and adjustment

Input Handling:

Multi-Format Support - JPEG, PNG, WebP, GIF Automatic Detection - MIME type validation Error Handling - Graceful failure for invalid files Memory Management - Efficient processing of large images

Output Processing:

Format Standardization - Always outputs JPEG Quality Optimization - 85% JPEG quality setting Transparency Handling - Proper alpha channel management File Naming - Automatic filename generation based on model name

“Save Cropped & Next” Workflow:

Saves current cropped image Updates database: image_processed = 1 Queries for next unprocessed model Automatically redirects to AI Image Selector for next model Shows completion message when all models processed

Format: JPEG (always) Quality: 85% compression Color Space: RGB Metadata: Preserved where possible Naming: Based on model name with conflict resolution

“Image failed to load”

Check file exists in uploads directory Verify file permissions are correct Ensure file is valid image format Check for corrupt image data

“Invalid crop dimensions”

Crop area too small (minimum 10×10 pixels) Crop area extends outside image bounds Aspect ratio calculation errors Browser JavaScript errors

“Failed to save cropped image”

Write permissions on models directory Disk space insufficient Invalid target filename Database connection issues

“Preview not updating”

JavaScript disabled or errors Browser compatibility issues Image loading failures Canvas rendering problems

File Issues:

Check upload directory: ../../uploads/ Verify file exists and is readable Re-upload image if corrupted Check file size limits

Permission Issues:

Ensure models directory writable: ../images/models/ Check PHP permissions Verify directory exists Create directory if missing

JavaScript Issues:

Enable JavaScript in browser Check browser console for errors Try refreshing the page Use different browser if needed

Escape - Cancel current operation Enter - Save current crop (when focused) Space - Toggle preview update Tab - Navigate between controls

Arrow Keys - Fine-tune crop position (1px increments) Shift + Arrow - Larger position adjustments (10px increments) Ctrl + Arrow - Resize crop area Alt + Arrow - Maintain aspect ratio while resizing

Choose High Resolution - Start with largest available image Consider Composition - Subject centered and well-framed Check Quality - Avoid blurry or pixelated sources Aspect Ratio - Match target proportions when possible

Focus on Subject - Center main subject in crop area Leave Breathing Room - Don't crop too tightly Check Preview - Use live preview for final validation Consider Usage - How image will be displayed

Use Batch Mode - Process multiple models efficiently Consistent Standards - Maintain similar cropping style Quality Control - Review results before moving on Backup Originals - Keep source images when possible

Model Record Updates:

model_image field - New filename image_processed flag - Set to 1 updated_at timestamp - Current time File cleanup - Remove old images if different

File Management:

Automatic Naming - Based on model name Conflict Resolution - Numbered suffixes for duplicates Cleanup - Remove temporary upload files Permission Setting - Proper file permissions

Return URL Handling:

Maintains navigation context Returns to appropriate page after completion Preserves query parameters Context-aware messaging

Batch Processing:

Seamless flow between models Progress tracking Completion notifications Error handling throughout process

Image Scaling - Display optimization for large images Canvas Efficiency - Optimized rendering pipeline Event Throttling - Smooth interaction response Memory Management - Proper cleanup of image data

Image Processing - Efficient GD library usage File I/O - Optimized read/write operations Database Queries - Prepared statements for security Error Handling - Graceful failure recovery

Upload Validation - Strict file type checking Path Traversal - Prevented through validation File Size Limits - Configurable maximums Virus Scanning - Recommended for uploads

Authentication - Category 3 access required IP Restrictions - Configurable access limits Session Management - Secure session handling CSRF Protection - Form token validation

Official Forum - Community Support Video Tutorials - Step-by-step guides FAQ Section - Common questions answered Documentation Updates - Regular feature additions

Error Logs - Check browser console and server logs System Requirements - Verify compatibility Configuration Help - Server setup assistance Custom Development - Modification services available

Last updated: 2025-06-30